newspack-components 2.0.1 → 2.1.0

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

@@ -1,8 +1,13 @@
 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';
@@ -22,18 +27,24 @@ class PluginSettings extends Component {
 
     _defineProperty(this, "fetchSettings", () => {
       const {
-        pluginSlug
+        afterFetch,
+        pluginSlug,
+        isWizard
       } = this.props;
       this.setState({
         inFlight: true
       });
       apiFetch({
-        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
@@ -46,12 +57,10 @@ class PluginSettings extends Component {
     });
 
     _defineProperty(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;
-      }, {})) || {};
+      }, {}) || {};
     });
 
     _defineProperty(this, "handleSettingChange", sectionKey => (key, value) => {
@@ -70,13 +79,15 @@ class PluginSettings extends Component {
 
     _defineProperty(this, "handleSectionUpdate", sectionKey => data => {
       const {
-        pluginSlug
+        afterUpdate,
+        pluginSlug,
+        isWizard
       } = this.props;
       this.setState({
         inFlight: true
       });
       apiFetch({
-        path: `/${pluginSlug}/v1/settings`,
+        path: isWizard ? `/newspack/v1/wizard/${pluginSlug}/settings` : `/${pluginSlug}/v1/settings`,
         method: 'POST',
         data: {
           section: sectionKey,
@@ -87,6 +98,10 @@ class PluginSettings extends Component {
           settings,
           error: null
         });
+
+        if ('function' === typeof afterUpdate) {
+          afterUpdate(settings);
+        }
       }).catch(error => {
         this.setState({
           error
@@ -99,30 +114,22 @@ class PluginSettings extends Component {
     });
 
     _defineProperty(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');
     });
 
     _defineProperty(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;
     });
 
     _defineProperty(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;
     });
 
     _defineProperty(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;
@@ -132,9 +139,7 @@ class PluginSettings extends Component {
     });
 
     _defineProperty(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 = {
@@ -154,7 +159,9 @@ class PluginSettings extends Component {
   render() {
     const {
       title,
-      description
+      description,
+      hasGreyHeader,
+      children
     } = this.props;
     const {
       settings,
@@ -162,21 +169,28 @@ class PluginSettings extends Component {
       error
     } = this.state;
     return _jsxs(Fragment, {
-      children: [_jsx(SectionHeader, {
+      children: [title && _jsx(SectionHeader, {
         title: title,
         description: description
       }), error && _jsx(Notice, {
         isError: true,
         noticeText: error.message
-      }), Object.keys(settings).map(sectionKey => _jsx(SettingsSection, {
-        disabled: inFlight,
-        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))]
+      }), _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]
+      })]
     });
   }
 

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

@@ -75,6 +75,14 @@ class PluginToggle extends Component {
               }
             };
           }, () => shouldRefreshAfterUpdate && location.reload());
+        }).catch(e => {
+          this.setState({
+            pluginInfo: { ...pluginInfo,
+              [plugin]: { ...pluginInfo[plugin],
+                error: e.message || __('There was an error managing this plugin.', 'newspack')
+              }
+            }
+          });
         });
       });
     });
@@ -141,6 +149,16 @@ class PluginToggle extends Component {
       }
     });
 
+    _defineProperty(this, "errorForPlugin", plugin => {
+      const {
+        slug
+      } = plugin;
+      const {
+        pluginInfo
+      } = this.state;
+      return pluginInfo[slug]?.error || null;
+    });
+
     _defineProperty(this, "isPluginInstalledAndActive", plugin => {
       const {
         status
@@ -169,6 +187,7 @@ class PluginToggle extends Component {
       } = 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,
@@ -178,7 +197,10 @@ class PluginToggle extends 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/esm/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/esm/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/esm/section-header/index.js

@@ -5,6 +5,7 @@
 /**
  * Internal dependencies
  */
+import { Grid } from '..';
 import './style.scss';
 /**
  * External dependencies
@@ -16,22 +17,33 @@ import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 
 const SectionHeader = _ref => {
   let {
+    centered,
     className,
     description,
+    heading,
+    isWhite,
     noMargin,
     title
   } = _ref;
-  const classes = classnames('newspack-section-header', noMargin && 'newspack-section-header--no-margin', className);
-  return _jsxs("div", {
+  const classes = classnames('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 _jsxs(Grid, {
+    columns: 1,
+    gutter: 8,
     className: classes,
-    children: [_jsx("h2", {
+    children: [typeof title === 'string' && _jsx(HeadingTag, {
       children: title
-    }), typeof description === 'string' && _jsx("span", {
+    }), typeof title === 'function' && _jsx(HeadingTag, {
+      children: title()
+    }), typeof description === 'string' && _jsx("p", {
       children: description
-    }), typeof description === 'function' && _jsx("span", {
+    }), typeof description === 'function' && _jsx("p", {
       children: description()
     })]
   });
 };
 
+SectionHeader.defaultProps = {
+  heading: 2
+};
 export default SectionHeader;

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

@@ -2,14 +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/esm/select-control/ButtonGroupControl.js

@@ -7,29 +7,30 @@ import classnames from 'classnames';
  */
 
 import { Icon } from '@wordpress/icons';
-import { BaseControl } from '@wordpress/components';
+import { BaseControl, Button, ButtonGroup } from '@wordpress/components';
 /**
  * Internal dependencies
  */
 
-import { Button, ButtonGroup, hooks } from '..';
+import { hooks } from '..';
 import { jsx as _jsx } from "@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 _jsx(BaseControl, {
     label: label,
+    hideLabelFromVision: hideLabelFromVision,
     id: id.current,
     className: classnames(className, 'components-select-control'),
     children: _jsx(ButtonGroup, {
-      noMargin: true,
       children: buttonOptions.map(option => {
         const isSelected = value === option.value;
 
@@ -43,8 +44,7 @@ const ButtonGroupControl = _ref => {
         }
 
         return _jsx(Button, {
-          isSecondary: !isSelected,
-          isPressed: isSelected,
+          variant: isSelected ? 'primary' : null,
           onClick: () => onChange(option.value),
           children: _jsx(Label, {})
         }, option.value);

package/dist/esm/select-control/GroupedSelectControl.js

@@ -42,41 +42,44 @@ export default function GroupedSelectControl(_ref) {
   };
 
   const id = hooks.useUniqueId('group-select');
-  return _jsxs(BaseControl, {
+  return _jsx(BaseControl, {
     label: label,
     hideLabelFromVision: hideLabelFromVision,
     id: id,
     help: help,
     className: classnames(className, 'components-select-control'),
-    children: [_jsxs("select", {
-      id: id,
-      className: "components-select-control__input",
-      onChange: onChangeValue,
-      "aria-describedby": !!help ? `${id}__help` : undefined,
-      ...props,
-      children: [_jsx("option", {
-        value: "",
-        children: __('-- Select --', 'newspack')
-      }), optgroups.map((_ref2, optgroupIndex) => {
-        let {
-          label: optgroupLabel,
-          options
-        } = _ref2;
-        return _jsx("optgroup", {
-          label: optgroupLabel,
-          children: options.map((option, optionIndex) => _jsx("option", {
-            value: option.value,
-            disabled: option.disabled,
-            children: option.label
-          }, `${option.label}-${option.value}-${optionIndex}`))
-        }, optgroupIndex);
+    children: _jsxs("div", {
+      className: "relative",
+      children: [_jsxs("select", {
+        id: id,
+        className: "components-select-control__input",
+        onChange: onChangeValue,
+        "aria-describedby": !!help ? `${id}__help` : undefined,
+        ...props,
+        children: [_jsx("option", {
+          value: "",
+          children: __('-- Select --', 'newspack')
+        }), optgroups.map((_ref2, optgroupIndex) => {
+          let {
+            label: optgroupLabel,
+            options
+          } = _ref2;
+          return _jsx("optgroup", {
+            label: optgroupLabel,
+            children: options.map((option, optionIndex) => _jsx("option", {
+              value: option.value,
+              disabled: option.disabled,
+              children: option.label
+            }, `${option.label}-${option.value}-${optionIndex}`))
+          }, optgroupIndex);
+        })]
+      }), _jsx("div", {
+        className: "components-select-control__arrow-wrapper",
+        children: _jsx(Icon, {
+          icon: chevronDown,
+          size: 18
+        })
       })]
-    }), _jsx("div", {
-      className: "components-select-control__arrow-wrapper",
-      children: _jsx(Icon, {
-        icon: chevronDown,
-        size: 18
-      })
-    })]
+    })
   });
 }

package/dist/esm/select-control/index.js

@@ -30,10 +30,9 @@ class SelectControl extends Component {
       className,
       optgroups,
       buttonOptions,
-      isSmall,
       ...otherProps
     } = this.props;
-    const classes = classNames('newspack-select-control', optgroups && 'newspack-grouped-select-control', buttonOptions && 'newspack-buttons-select-control', isSmall && 'newspack-select-control--small', className);
+    const classes = classNames('newspack-select-control', optgroups && 'newspack-grouped-select-control', buttonOptions && 'newspack-buttons-select-control', className);
     return _jsx("div", {
       className: classes,
       children: optgroups ? _jsx(GroupedSelectControl, {

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

@@ -2,92 +2,39 @@
  * Select Control
  */
 
-@import '../../../shared/scss/colors';
 @import '~@wordpress/base-styles/colors';
 
-.newspack-select-control {
-	color: $gray-700;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
+.components-select-control {
+	&__input {
+		max-width: 100% !important;
 
-	.components-base-control__field {
-		margin: 0;
-	}
-	.components-input-control__label,
-	.components-base-control__label {
-		color: $gray-900 !important;
-		display: flex;
-		font-size: 14px;
-		font-weight: bold;
-		line-height: 24px;
-		padding-bottom: 0 !important;
-		margin-bottom: 0;
-	}
-
-	.components-select-control {
-		border-radius: 3px;
-		font-size: 14px;
-		line-height: 24px;
-
-		div.components-input-control__backdrop {
-			border-color: $gray-300;
-		}
-
-		select.components-select-control__input {
-			color: $gray-700;
-			border-color: $gray-300;
-			font-size: 16px;
-			height: 48px;
-			line-height: 24px;
-			max-width: 100%;
-			min-height: 48px;
+		&[multiple] {
+			height: auto !important;
+			min-height: 70px !important;
+			padding: 0 !important;
 
-			@media screen and ( min-width: 600px ) {
-				font-size: 16px;
+			+ .components-input-control__suffix {
+				display: none;
 			}
 
-			@media screen and ( min-width: 768px ) {
-				font-size: 14px;
-			}
+			option {
+				min-height: 1.4em;
+				padding: 8px;
 
-			&:focus ~ div.components-input-control__backdrop {
-				border-color: $primary-500;
-				box-shadow: inset 0 0 0 2px $primary-500;
+				&:checked {
+					background: var( --wp-admin-theme-color );
+					color: white;
+				}
 			}
 		}
 	}
 
-	// Help
-
-	.components-base-control__help {
-		margin-top: 0;
-		font-style: italic;
-	}
-
-	// Small
-
-	&--small {
-		.components-select-control select.components-select-control__input {
-			height: 36px;
-			min-height: 36px;
-		}
-	}
-
-	// Multiple Select Controls
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -16px;
+	.components-base-control__field {
+		width: 100%;
 	}
 
-	// Multiple Controls
-
-	+ .newspack-category-autocomplete,
-	+ .newspack-text-control,
-	+ .newspack-textarea-control {
-		margin-bottom: 32px;
-		margin-top: -16px;
+	.components-input-control__label {
+		line-height: inherit;
 	}
 }
 
@@ -100,29 +47,38 @@
 		&__input {
 			appearance: none;
 			background: transparent;
-			border-radius: 3px;
+			border: 1px solid $gray-700;
+			border-radius: 2px;
 			box-shadow: none !important;
 			box-sizing: border-box;
 			display: block;
+			font-size: inherit;
 			margin: 0;
+			max-width: 100%;
 			outline: none;
 			padding: 0 24px 0 7px;
 			width: 100%;
 
+			&:hover {
+				color: inherit;
+			}
+
 			&:focus {
-				border-color: $primary-500 !important;
-				box-shadow: inset 0 0 0 2px $primary-500 !important;
+				border-color: var( --wp-admin-theme-color-darker-10 ) !important;
+				box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color-darker-10 ) !important;
+				color: inherit;
 			}
 		}
 
 		&__arrow-wrapper {
 			align-items: center;
-			bottom: 0;
 			display: flex;
-			height: 48px;
+			height: 24px;
 			justify-content: center;
+			margin-top: -12px;
 			position: absolute;
 			right: 1px;
+			top: 50%;
 			width: 24px;
 		}
 	}
@@ -131,19 +87,22 @@
 // Buttons
 
 .newspack-buttons-select-control {
-	&.icon-only {
-		.newspack-button-group {
-			display: flex;
-		}
+	.components-base-control__label {
+		display: inline-flex;
+		margin-bottom: 8px;
+	}
 
-		.newspack-button {
+	.components-button-group {
+		display: flex;
+	}
+
+	&.icon-only {
+		.components-button {
 			align-items: center;
-			display: flex;
-			font-size: 17px;
-			height: 48px;
+			height: 36px;
 			justify-content: center;
 			padding: 0 !important;
-			width: 48px;
+			width: 36px;
 		}
 	}
 }