newspack-components 2.2.0 → 3.0.0-alpha.1

package/dist/esm/patrons-logo/index.js

@@ -9,12 +9,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { Component } from '@wordpress/element';
 import { Path, SVG } from '@wordpress/components';
 import { __ as alias__ } from '@wordpress/i18n';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const __ = alias__;
 class PatronsLogo extends Component {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     /**
      * Render.
      */
@@ -25,7 +24,7 @@ class PatronsLogo extends Component {
         height: "16",
         viewBox: "0 0 438 32",
         className: "patrons-logo",
-        "aria-label": __('A project of WordPress.com and the Google News Initiative', 'newspack'),
+        "aria-label": __('A project of WordPress.com and the Google News Initiative', 'newspack-plugin'),
         children: [_jsx(Path, {
           fillRule: "evenodd",
           clipRule: "evenodd",

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

@@ -30,14 +30,10 @@ import classnames from 'classnames';
 /**
  * Plugin installer.
  */
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 class PluginInstaller extends Component {
   constructor() {
-    var _this;
     super(...arguments);
-    _this = this;
     _defineProperty(this, "componentDidMount", () => {
       const {
         plugins
@@ -126,12 +122,11 @@ class PluginInstaller extends Component {
         }
       });
     });
-    _defineProperty(this, "setInstallationStatus", function (slug, installationStatus) {
-      let notification = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    _defineProperty(this, "setInstallationStatus", (slug, installationStatus, notification = null) => {
       const {
         pluginInfo
-      } = _this.state;
-      _this.updatePluginInfo({
+      } = this.state;
+      this.updatePluginInfo({
         ...pluginInfo,
         [slug]: {
           ...pluginInfo[slug],
@@ -202,7 +197,7 @@ class PluginInstaller extends Component {
 
     // Make sure plugin status falls in either one of these, to handle button text.
     const pluginInstalled = currentStatus => currentStatus === 'active' || currentStatus === 'inactive';
-    const buttonText = currentPluginStatuses.every(pluginInstalled) ? __('Activate', 'newspack') : __('Install', 'newspack');
+    const buttonText = currentPluginStatuses.every(pluginInstalled) ? __('Activate', 'newspack-plugin') : __('Install', 'newspack-plugin');
     const needsInstall = slugs.some(slug => {
       const plugin = pluginInfo[slug];
       return plugin.Status !== 'active' && plugin.installationStatus === PLUGIN_STATE_NONE;
@@ -212,7 +207,7 @@ class PluginInstaller extends Component {
         className: "newspack-plugin-installer_is-waiting",
         children: [_jsx(Waiting, {
           isLeft: true
-        }), __('Retrieving plugin information…')]
+        }), __('Retrieving plugin information…', 'newspack-plugin')]
       }), pluginInfo && slugs.length > 0 && slugs.map(slug => {
         const plugin = pluginInfo[slug];
         const {
@@ -232,7 +227,7 @@ class PluginInstaller extends Component {
         } else if (!installable) {
           actionText = _jsxs("span", {
             className: "newspack-plugin-installer__status",
-            children: [isAtomic ? __('Contact Newspack support to install', 'newspack') : __('Plugin must be installed manually', 'newspack'), _jsx("span", {
+            children: [isAtomic ? __('Contact Newspack support to install', 'newspack-plugin') : __('Plugin must be installed manually', 'newspack-plugin'), _jsx("span", {
               className: "newspack-checkbox-icon"
             })]
           });
@@ -246,14 +241,14 @@ class PluginInstaller extends Component {
         } else if (Status === 'inactive') {
           actionText = _jsxs("span", {
             className: "newspack-plugin-installer__status",
-            children: [__('Activate', 'newspack'), _jsx("span", {
+            children: [__('Activate', 'newspack-plugin'), _jsx("span", {
               className: "newspack-checkbox-icon"
             })]
           });
         } else if (Status === 'active') {
           actionText = _jsxs("span", {
             className: "newspack-plugin-installer__status",
-            children: [__('Installed', 'newspack'), _jsx("span", {
+            children: [__('Installed', 'newspack-plugin'), _jsx("span", {
               className: "newspack-checkbox-icon newspack-checkbox-icon--checked",
               children: _jsx(Icon, {
                 icon: check

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

@@ -16,8 +16,7 @@ import { CheckboxControl } from '@wordpress/components';
  */
 import { ActionCard, Button, Grid, Notice, SelectControl, TextControl } from '../';
 import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const isSelectControl = setting => {
   return Array.isArray(setting.options) && setting.options.length;
 };
@@ -83,8 +82,7 @@ const SettingsSection = props => {
       setSaveDisabled(false);
     }
   });
-  const createFilter = function (name) {
-    let defaultComponent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  const createFilter = (name, defaultComponent = null) => {
     return applyFilters(`newspack.settingSection.${sectionKey}.${name}`, defaultComponent, props);
   };
   let columns = 2;

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

@@ -17,8 +17,7 @@ import { __ as alias__ } from '@wordpress/i18n';
 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";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 class PluginSettings extends Component {
   constructor() {
     super(...arguments);
@@ -211,7 +210,7 @@ class PluginSettings extends Component {
   }
 }
 PluginSettings.defaultProps = {
-  title: __('General Settings', 'newspack')
+  title: __('General Settings', 'newspack-plugin')
 };
 PluginSettings.Section = SettingsSection;
 export default PluginSettings;

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

@@ -16,11 +16,10 @@ 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";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 class PluginToggle extends Component {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     _defineProperty(this, "state", {
       pluginInfo: {}
     });
@@ -67,24 +66,21 @@ class PluginToggle extends Component {
           const {
             shouldRefreshAfterUpdate
           } = plugins[plugin];
-          this.setState(_ref => {
-            let {
-              pluginInfo: currentPluginInfo
-            } = _ref;
-            return {
-              pluginInfo: {
-                ...currentPluginInfo,
-                [plugin]: response
-              }
-            };
-          }, () => shouldRefreshAfterUpdate && location.reload());
+          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')
+                error: e.message || __('There was an error managing this plugin.', 'newspack-plugin')
               }
             }
           });
@@ -127,21 +123,21 @@ class PluginToggle extends Component {
       // 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, {
+          children: [__('Installing…', 'newspack-plugin'), " ", _jsx(Waiting, {
             isRight: true
           })]
         });
       }
       if ('deactivate' === inFlight) {
         return _jsxs(Fragment, {
-          children: [__('Deactivating…', 'newspack'), " ", _jsx(Waiting, {
+          children: [__('Deactivating…', 'newspack-plugin'), " ", _jsx(Waiting, {
             isRight: true
           })]
         });
       }
       if (!name) {
         return _jsxs(Fragment, {
-          children: [__('Loading…', 'newspack'), " ", _jsx(Waiting, {
+          children: [__('Loading…', 'newspack-plugin'), " ", _jsx(Waiting, {
             isRight: true
           })]
         });
@@ -151,7 +147,7 @@ class PluginToggle extends Component {
         return null;
       }
       if (href || editPath) {
-        return actionText ? actionText : __('Configure', 'newspack');
+        return actionText ? actionText : __('Configure', 'newspack-plugin');
       }
     });
     /**

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

@@ -14,69 +14,67 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-export default function PositionControl(_ref) {
-  let {
-    allowedPositions,
-    value,
-    label,
-    help,
-    onChange,
-    size,
-    ...props
-  } = _ref;
+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')
+    label: __('Top', 'newspack-plugin')
   }, {
     value: 'center',
     /* translators: Overlay Position */
-    label: __('Center', 'newspack')
+    label: __('Center', 'newspack-plugin')
   }, {
     value: 'bottom',
     /* translators: Overlay Position */
-    label: __('Bottom', 'newspack')
+    label: __('Bottom', 'newspack-plugin')
   }] : [{
     value: 'top_left',
     /* translators: Overlay Position */
-    label: __('Top Left', 'newspack')
+    label: __('Top Left', 'newspack-plugin')
   }, {
     value: 'top',
     /* translators: Overlay Position */
-    label: __('Top Center', 'newspack')
+    label: __('Top Center', 'newspack-plugin')
   }, {
     value: 'top_right',
     /* translators: Overlay Position */
-    label: __('Top Right', 'newspack')
+    label: __('Top Right', 'newspack-plugin')
   }, {
     value: 'center_left',
     /* translators: Overlay Position */
-    label: __('Center Left', 'newspack')
+    label: __('Center Left', 'newspack-plugin')
   }, {
     value: 'center',
     /* translators: Overlay Position */
-    label: __('Center', 'newspack')
+    label: __('Center', 'newspack-plugin')
   }, {
     value: 'center_right',
     /* translators: Overlay Position */
-    label: __('Center Right', 'newspack')
+    label: __('Center Right', 'newspack-plugin')
   }, {
     value: 'bottom_left',
     /* translators: Overlay Position */
-    label: __('Bottom Left', 'newspack')
+    label: __('Bottom Left', 'newspack-plugin')
   }, {
     value: 'bottom',
     /* translators: Overlay Position */
-    label: __('Bottom Center', 'newspack')
+    label: __('Bottom Center', 'newspack-plugin')
   }, {
     value: 'bottom_right',
     /* translators: Overlay Position */
-    label: __('Bottom Right', 'newspack')
+    label: __('Bottom Right', 'newspack-plugin')
   }];
   return _jsxs("div", {
     className: classnames('newspack-position-placement-control', 'size-' + size),
@@ -84,7 +82,7 @@ export default function PositionControl(_ref) {
       className: "components-base-control__label",
       children: label
     }), _jsx(ButtonGroup, {
-      "aria-label": __('Select Position', 'newspack'),
+      "aria-label": __('Select Position', 'newspack-plugin'),
       ...props,
       children: options.map((option, index) => {
         return _jsx("div", {

package/dist/esm/progress-bar/index.js

@@ -11,8 +11,7 @@ import { Component } from '@wordpress/element';
  * Internal dependencies.
  */
 import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 class ProgressBar extends Component {
   /**
    * Get completion as a percentage.

package/dist/esm/progress-bar/index.test.js

@@ -67,11 +67,10 @@ describe('ProgressBar', () => {
         total: 3
       },
       expectedWidth: 100
-    }].forEach(_ref => {
-      let {
-        props,
-        expectedWidth
-      } = _ref;
+    }].forEach(({
+      props,
+      expectedWidth
+    }) => {
       it(`with expected  progress of ${expectedWidth}`, () => {
         const {
           getByTestId

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

@@ -17,19 +17,17 @@ import './style.scss';
  * External dependencies
  */
 import classnames from 'classnames';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const SectionHeader = _ref => {
-  let {
-    centered = false,
-    className = null,
-    description,
-    heading = 2,
-    isWhite = false,
-    noMargin = false,
-    title,
-    id = null
-  } = _ref;
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+const SectionHeader = ({
+  centered = false,
+  className = null,
+  description = '',
+  heading = 2,
+  isWhite = false,
+  noMargin = false,
+  title,
+  id = null
+}) => {
   // If id is in the URL as a scrollTo param, scroll to it on render.
   const ref = useRef();
   useEffect(() => {
@@ -48,6 +46,7 @@ const SectionHeader = _ref => {
   const HeadingTag = `h${heading}`;
   return _jsx("div", {
     id: id,
+    className: "newspack-section-header__container",
     ref: ref,
     children: _jsxs(Grid, {
       columns: 1,
@@ -57,7 +56,7 @@ const SectionHeader = _ref => {
         children: title
       }), typeof title === 'function' && _jsx(HeadingTag, {
         children: title()
-      }), typeof description === 'string' && _jsx("p", {
+      }), description && typeof description === 'string' && _jsx("p", {
         children: description
       }), typeof description === 'function' && _jsx("p", {
         children: description()

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

@@ -7,6 +7,10 @@
 .newspack-section-header {
 	margin: 64px 0 32px;
 
+	&__container:not(:first-child) {
+		margin-top: 48px;
+	}
+
 	&--no-margin,
 	h1,
 	h2,

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

@@ -14,16 +14,15 @@ import { BaseControl, Button, ButtonGroup } from '@wordpress/components';
  */
 import { hooks } from '..';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const ButtonGroupControl = _ref => {
-  let {
-    buttonOptions,
-    buttonSmall,
-    className,
-    hideLabelFromVision,
-    label,
-    onChange,
-    value
-  } = _ref;
+const ButtonGroupControl = ({
+  buttonOptions,
+  buttonSmall,
+  className,
+  hideLabelFromVision,
+  label,
+  onChange,
+  value
+}) => {
   const id = hooks.useUniqueId('button-group');
   return _jsx(BaseControl, {
     label: label,

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

@@ -21,18 +21,16 @@ import { hooks } from '..';
 /**
  * SelectControl with optgroup support
  */
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-export default function GroupedSelectControl(_ref) {
-  let {
-    help,
-    label,
-    onChange,
-    optgroups = [],
-    className,
-    hideLabelFromVision,
-    ...props
-  } = _ref;
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+export default function GroupedSelectControl({
+  help,
+  label,
+  onChange,
+  optgroups = [],
+  className,
+  hideLabelFromVision,
+  ...props
+}) {
   const onChangeValue = event => {
     const {
       value
@@ -57,21 +55,18 @@ export default function GroupedSelectControl(_ref) {
         ...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: __('-- Select --', 'newspack-plugin')
+        }), optgroups.map(({
+          label: optgroupLabel,
+          options
+        }, optgroupIndex) => _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, {

package/dist/esm/settings/MinMaxSetting.js

@@ -9,27 +9,26 @@ import { CheckboxControl } from '@wordpress/components';
  * Internal dependencies.
  */
 import { TextControl } from '../';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-const MinMaxSetting = _ref => {
-  let {
-    min,
-    max,
-    onChangeMin,
-    onChangeMax,
-    minPlaceholder,
-    maxPlaceholder
-  } = _ref;
-  return _jsxs(_Fragment, {
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+const MinMaxSetting = ({
+  min,
+  max,
+  onChangeMin,
+  onChangeMax,
+  minPlaceholder,
+  maxPlaceholder,
+  ...props
+}) => {
+  return _jsxs("div", {
+    ...props,
     children: [_jsxs("div", {
       className: "newspack-settings__min-max",
       children: [_jsx(CheckboxControl, {
         checked: min > 0,
         onChange: value => onChangeMin(value ? 1 : 0),
-        label: __('Min', 'newspack')
+        label: __('Min', 'newspack-plugin')
       }), _jsx(TextControl, {
-        "data-testid": "min-articles-input",
+        "data-testid": "min",
         type: "number",
         value: min,
         placeholder: minPlaceholder,
@@ -37,11 +36,13 @@ const MinMaxSetting = _ref => {
       })]
     }), _jsxs("div", {
       className: "newspack-settings__min-max",
+      "data-testid": "max",
       children: [_jsx(CheckboxControl, {
         checked: max > 0,
         onChange: value => onChangeMax(value ? min || 1 : 0),
-        label: __('Max', 'newspack')
+        label: __('Max', 'newspack-plugin')
       }), _jsx(TextControl, {
+        "data-testid": "max",
         type: "number",
         value: max,
         placeholder: maxPlaceholder,

package/dist/esm/settings/SettingsCard.js

@@ -8,16 +8,15 @@ import classnames from 'classnames';
  */
 import { Grid, ActionCard } from '../';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const SettingsCard = _ref => {
-  let {
-    children,
-    className,
-    columns,
-    gutter,
-    noBorder,
-    rowGap,
-    ...props
-  } = _ref;
+const SettingsCard = ({
+  children,
+  className,
+  columns,
+  gutter,
+  noBorder,
+  rowGap,
+  ...props
+}) => {
   const classes = classnames('newspack-settings__card', noBorder && 'newspack-settings__no-border', className);
   return _jsx(ActionCard, {
     ...props,

package/dist/esm/settings/SettingsSection.js

@@ -2,29 +2,25 @@
  * Internal dependencies.
  */
 import { Grid, InfoButton } from '../';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const SettingSection = _ref => {
-  let {
-    title,
-    description,
-    children
-  } = _ref;
-  return _jsxs(Grid, {
-    columns: 1,
-    gutter: 8,
-    className: "newspack-settings__section",
-    children: [_jsxs("div", {
-      className: "newspack-settings__section__title",
-      children: [_jsx("span", {
-        children: title
-      }), description && _jsx(InfoButton, {
-        text: description
-      })]
-    }), _jsx("div", {
-      className: "newspack-settings__section__content",
-      children: children
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+const SettingSection = ({
+  title,
+  description,
+  children
+}) => _jsxs(Grid, {
+  columns: 1,
+  gutter: 8,
+  className: "newspack-settings__section",
+  children: [_jsxs("div", {
+    className: "newspack-settings__section__title",
+    children: [_jsx("span", {
+      children: title
+    }), description && _jsx(InfoButton, {
+      text: description
     })]
-  });
-};
+  }), _jsx("div", {
+    className: "newspack-settings__section__content",
+    children: children
+  })]
+});
 export default SettingSection;