newspack-components 4.3.0 → 4.4.0-alpha.1

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

@@ -1,3 +1,13 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * WordPress dependencies.
  */
@@ -15,204 +25,191 @@ import './style.scss';
  * Plugin toggle group component.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-class PluginToggle extends Component {
-  state = {
-    pluginInfo: {}
-  };
-  componentDidMount = () => {
-    this.retrievePluginInfo();
-  };
-
-  /**
-   * Retrieve complete data about Newspack plugins.
-   */
-  retrievePluginInfo = () => {
-    return new Promise(() => {
-      apiFetch({
-        path: '/newspack/v1/plugins/'
-      }).then(pluginInfo => this.setState({
-        pluginInfo
-      }));
+var PluginToggle = /*#__PURE__*/function (_Component) {
+  function PluginToggle() {
+    var _this;
+    _classCallCheck(this, PluginToggle);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, PluginToggle, [].concat(args));
+    _defineProperty(_this, "state", {
+      pluginInfo: {}
     });
-  };
-
-  /**
-   * Install/activate or remove a plugin.
-   */
-  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],
+    _defineProperty(_this, "componentDidMount", function () {
+      _this.retrievePluginInfo();
+    });
+    /**
+     * Retrieve complete data about Newspack plugins.
+     */
+    _defineProperty(_this, "retrievePluginInfo", function () {
+      return new Promise(function () {
+        apiFetch({
+          path: '/newspack/v1/plugins/'
+        }).then(function (pluginInfo) {
+          return _this.setState({
+            pluginInfo: pluginInfo
+          });
+        });
+      });
+    });
+    /**
+     * Install/activate or remove a plugin.
+     */
+    _defineProperty(_this, "managePlugin", function (plugin, value) {
+      var plugins = _this.props.plugins;
+      var pluginInfo = _this.state.pluginInfo;
+      var action = value ? 'configure' : 'deactivate';
+      var params = {
+        path: "/newspack/v1/plugins/".concat(plugin, "/").concat(action, "/"),
+        method: 'post'
+      };
+      _this.setState({
+        pluginInfo: _objectSpread(_objectSpread({}, pluginInfo), {}, _defineProperty({}, plugin, _objectSpread(_objectSpread({}, 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],
+        })))
+      }, function () {
+        apiFetch(params).then(function (response) {
+          var shouldRefreshAfterUpdate = plugins[plugin].shouldRefreshAfterUpdate;
+          _this.setState(function (_ref) {
+            var currentPluginInfo = _ref.pluginInfo;
+            return {
+              pluginInfo: _objectSpread(_objectSpread({}, currentPluginInfo), {}, _defineProperty({}, plugin, response))
+            };
+          }, function () {
+            return shouldRefreshAfterUpdate && location.reload();
+          });
+        })["catch"](function (e) {
+          _this.setState({
+            pluginInfo: _objectSpread(_objectSpread({}, pluginInfo), {}, _defineProperty({}, plugin, _objectSpread(_objectSpread({}, pluginInfo[plugin]), {}, {
               error: e.message || __('There was an error managing this plugin.', 'newspack-plugin')
-            }
-          }
+            })))
+          });
         });
       });
     });
-  };
-
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      plugins
-    } = this.props;
-    const {
-      pluginInfo
-    } = this.state;
-    return this.prepareDataForRender(plugins, pluginInfo).map((plugin, index) => {
-      var _plugin$onClick;
-      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 /*#__PURE__*/_jsx(ActionCard, {
-        className: this.classNameForPlugin(plugin),
-        title: name,
-        description: description,
-        actionText: this.actionTextForPlugin(plugin),
-        handoff: handoff,
-        onClick: (_plugin$onClick = plugin.onClick) !== null && _plugin$onClick !== void 0 ? _plugin$onClick : null,
-        href: href,
-        toggle: true,
-        toggleChecked: this.isPluginInstalledAndActive(plugin),
-        toggleOnChange: value => this.managePlugin(slug, value),
-        notification: error,
-        notificationHTML: error,
-        notificationLevel: "error"
-      }, index);
+    /**
+     * Prepare plugins data for render. Change all keys to camelCase, merge API-fetched data with prop.
+     */
+    _defineProperty(_this, "prepareDataForRender", function (pluginsFromProps, pluginsFromAPI) {
+      return Object.keys(pluginsFromProps).map(function (pluginSlug) {
+        return pluginsFromAPI[pluginSlug] ? Object.keys(pluginsFromAPI[pluginSlug]).reduce(function (accumulator, key) {
+          return _objectSpread(_objectSpread({}, accumulator), {}, _defineProperty({}, key.charAt(0).toLowerCase() + key.slice(1), pluginsFromAPI[pluginSlug][key]));
+        }, {}) : {};
+      }).map(function (plugin) {
+        return 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", function (plugin) {
+      var status = plugin.status,
+        inFlight = plugin.inFlight;
+      if (inFlight) {
+        return 'in-flight';
+      }
+      if (!status) {
+        return 'loading';
+      }
+    });
+    /**
+     * Generate the ActionCard action text for a plugin.
+     */
+    _defineProperty(_this, "actionTextForPlugin", function (plugin) {
+      var actionText = plugin.actionText,
+        editPath = plugin.editPath,
+        href = plugin.href,
+        inFlight = plugin.inFlight,
+        name = plugin.name;
+      // Show spinner when plugin data is unavailable, or when an API call is in flight.
+      if ('configure' === inFlight) {
+        return /*#__PURE__*/_jsxs(Fragment, {
+          children: [__('Installing…', 'newspack-plugin'), " ", /*#__PURE__*/_jsx(Waiting, {
+            isRight: true
+          })]
+        });
+      }
+      if ('deactivate' === inFlight) {
+        return /*#__PURE__*/_jsxs(Fragment, {
+          children: [__('Deactivating…', 'newspack-plugin'), " ", /*#__PURE__*/_jsx(Waiting, {
+            isRight: true
+          })]
+        });
+      }
+      if (!name) {
+        return /*#__PURE__*/_jsxs(Fragment, {
+          children: [__('Loading…', 'newspack-plugin'), " ", /*#__PURE__*/_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", function (plugin) {
+      var _pluginInfo$slug;
+      var slug = plugin.slug;
+      var pluginInfo = _this.state.pluginInfo;
+      return ((_pluginInfo$slug = pluginInfo[slug]) === null || _pluginInfo$slug === void 0 ? void 0 : _pluginInfo$slug.error) || null;
+    });
+    /**
+     * Get installation/activation status for a plugin.
+     */
+    _defineProperty(_this, "isPluginInstalledAndActive", function (plugin) {
+      var status = plugin.status;
+      return status === 'active';
+    });
+    return _this;
   }
-
-  /**
-   * Prepare plugins data for render. Change all keys to camelCase, merge API-fetched data with prop.
-   */
-  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.
-   */
-  classNameForPlugin = plugin => {
-    const {
-      status,
-      inFlight
-    } = plugin;
-    if (inFlight) {
-      return 'in-flight';
-    }
-    if (!status) {
-      return 'loading';
-    }
-  };
-
-  /**
-   * Generate the ActionCard action text for a plugin.
-   */
-  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 /*#__PURE__*/_jsxs(Fragment, {
-        children: [__('Installing…', 'newspack-plugin'), " ", /*#__PURE__*/_jsx(Waiting, {
-          isRight: true
-        })]
-      });
-    }
-    if ('deactivate' === inFlight) {
-      return /*#__PURE__*/_jsxs(Fragment, {
-        children: [__('Deactivating…', 'newspack-plugin'), " ", /*#__PURE__*/_jsx(Waiting, {
-          isRight: true
-        })]
-      });
-    }
-    if (!name) {
-      return /*#__PURE__*/_jsxs(Fragment, {
-        children: [__('Loading…', 'newspack-plugin'), " ", /*#__PURE__*/_jsx(Waiting, {
-          isRight: true
-        })]
+  _inherits(PluginToggle, _Component);
+  return _createClass(PluginToggle, [{
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this2 = this;
+      var plugins = this.props.plugins;
+      var pluginInfo = this.state.pluginInfo;
+      return this.prepareDataForRender(plugins, pluginInfo).map(function (plugin, index) {
+        var _plugin$onClick;
+        var name = plugin.name,
+          description = plugin.description,
+          href = plugin.href,
+          slug = plugin.slug,
+          editPath = plugin.editPath;
+        var pluginStatus = _this2.isPluginInstalledAndActive(plugin);
+        var handoff = !href && pluginStatus && editPath ? slug : null;
+        var error = _this2.errorForPlugin(plugin);
+        return /*#__PURE__*/_jsx(ActionCard, {
+          className: _this2.classNameForPlugin(plugin),
+          title: name,
+          description: description,
+          actionText: _this2.actionTextForPlugin(plugin),
+          handoff: handoff,
+          onClick: (_plugin$onClick = plugin.onClick) !== null && _plugin$onClick !== void 0 ? _plugin$onClick : null,
+          href: href,
+          toggle: true,
+          toggleChecked: _this2.isPluginInstalledAndActive(plugin),
+          toggleOnChange: function toggleOnChange(value) {
+            return _this2.managePlugin(slug, value);
+          },
+          notification: error,
+          notificationHTML: error,
+          notificationLevel: "error"
+        }, index);
       });
     }
-    // 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.
-   */
-  errorForPlugin = plugin => {
-    const {
-      slug
-    } = plugin;
-    const {
-      pluginInfo
-    } = this.state;
-    return pluginInfo[slug]?.error || null;
-  };
-
-  /**
-   * Get installation/activation status for a plugin.
-   */
-  isPluginInstalledAndActive = plugin => {
-    const {
-      status
-    } = plugin;
-    return status === 'active';
-  };
-}
+  }]);
+}(Component);
 export default PluginToggle;

package/dist/esm/popover/index.js

@@ -1,3 +1,15 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+var _excluded = ["className", "padding"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * WordPress dependencies
  */
@@ -18,23 +30,30 @@ import classnames from 'classnames';
  * Popover
  */
 import { jsx as _jsx } from "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 /*#__PURE__*/_jsx(BaseComponent, {
-      className: classes,
-      ...otherProps
-    });
+var Popover = /*#__PURE__*/function (_Component) {
+  function Popover() {
+    _classCallCheck(this, Popover);
+    return _callSuper(this, Popover, arguments);
   }
-}
+  _inherits(Popover, _Component);
+  return _createClass(Popover, [{
+    key: "render",
+    value:
+    /**
+     * Render
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        padding = _this$props.padding,
+        otherProps = _objectWithoutProperties(_this$props, _excluded);
+      var classes = classnames('newspack-popover', padding && 'newspack-popover__padding-' + padding, className);
+      return /*#__PURE__*/_jsx(BaseComponent, _objectSpread({
+        className: classes
+      }, otherProps));
+    }
+  }]);
+}(Component);
 Popover.defaultProps = {
   padding: false
 };

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

@@ -1,3 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["allowedPositions", "value", "label", "help", "onChange", "size"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * WordPress dependencies
  */
@@ -14,19 +19,18 @@ import classnames from 'classnames';
  */
 import './style.scss';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function PositionControl({
-  allowedPositions,
-  value,
-  label,
-  help,
-  onChange,
-  size,
-  ...props
-}) {
+export default function PositionControl(_ref) {
+  var allowedPositions = _ref.allowedPositions,
+    value = _ref.value,
+    label = _ref.label,
+    help = _ref.help,
+    onChange = _ref.onChange,
+    size = _ref.size,
+    props = _objectWithoutProperties(_ref, _excluded);
   /**
    * Set layout options
    */
-  const options = size === 'full-width' ? [{
+  var options = size === 'full-width' ? [{
     value: 'top',
     /* translators: Overlay Position */
     label: __('Top', 'newspack-plugin')
@@ -80,10 +84,10 @@ export default function PositionControl({
     children: [/*#__PURE__*/_jsx("p", {
       className: "components-base-control__label",
       children: label
-    }), /*#__PURE__*/_jsx(ButtonGroup, {
-      "aria-label": __('Select Position', 'newspack-plugin'),
-      ...props,
-      children: options.map((option, index) => {
+    }), /*#__PURE__*/_jsx(ButtonGroup, _objectSpread(_objectSpread({
+      "aria-label": __('Select Position', 'newspack-plugin')
+    }, props), {}, {
+      children: options.map(function (option, index) {
         return /*#__PURE__*/_jsx("div", {
           className: option.value === value ? 'is-selected' : null,
           children: /*#__PURE__*/_jsx(Button, {
@@ -91,14 +95,14 @@ export default function PositionControl({
             title: option.label,
             "aria-label": option.label,
             isPrimary: option.value === value,
-            onClick: () => {
+            onClick: function onClick() {
               onChange(option.value);
             },
-            disabled: allowedPositions?.length && !allowedPositions.includes(option.value)
+            disabled: (allowedPositions === null || allowedPositions === void 0 ? void 0 : allowedPositions.length) && !allowedPositions.includes(option.value)
           })
-        }, `newspack-position-placement-item-${index}`);
+        }, "newspack-position-placement-item-".concat(index));
       })
-    }), /*#__PURE__*/_jsx("p", {
+    })), /*#__PURE__*/_jsx("p", {
       className: "components-base-control__help",
       children: help
     })]

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

@@ -1,3 +1,10 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * Progress Bar
  */
@@ -12,57 +19,67 @@ import { Component } from '@wordpress/element';
  */
 import './style.scss';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-class ProgressBar extends Component {
-  /**
-   * Get completion as a percentage.
-   *
-   * @param {number} completed The number of steps completed.
-   * @param {number} total     The total number of steps.
-   * @return {number} completion percentage
-   */
-  getCompletionPercentage(completed, total) {
-    if (!total) {
-      return 100;
-    }
-    return Math.max(Math.min(Math.round(completed / total * 100), 100), 0);
+var ProgressBar = /*#__PURE__*/function (_Component) {
+  function ProgressBar() {
+    _classCallCheck(this, ProgressBar);
+    return _callSuper(this, ProgressBar, arguments);
   }
+  _inherits(ProgressBar, _Component);
+  return _createClass(ProgressBar, [{
+    key: "getCompletionPercentage",
+    value:
+    /**
+     * Get completion as a percentage.
+     *
+     * @param {number} completed The number of steps completed.
+     * @param {number} total     The total number of steps.
+     * @return {number} completion percentage
+     */
+    function getCompletionPercentage(completed, total) {
+      if (!total) {
+        return 100;
+      }
+      return Math.max(Math.min(Math.round(completed / total * 100), 100), 0);
+    }
 
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      label,
-      completed,
-      total,
-      displayFraction
-    } = this.props;
-    const cleanTotal = Math.max(0, parseInt(total) || 0);
-    const cleanCompleted = Math.max(0, Math.min(parseInt(completed) || 0, parseInt(cleanTotal)));
-    const barStyle = {
-      width: this.getCompletionPercentage(cleanCompleted, cleanTotal) + '%'
-    };
-    return /*#__PURE__*/_jsxs("div", {
-      className: "newspack-progress-bar",
-      children: [(label || displayFraction) && /*#__PURE__*/_jsxs("div", {
-        className: "newspack-progress-bar__headings",
-        children: [label && /*#__PURE__*/_jsx("h2", {
-          children: label
-        }), displayFraction && /*#__PURE__*/_jsx("p", {
-          className: "is-dark",
-          children: /*#__PURE__*/_jsxs("strong", {
-            children: [cleanCompleted, "/", cleanTotal]
+    /**
+     * Render.
+     */
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        label = _this$props.label,
+        completed = _this$props.completed,
+        total = _this$props.total,
+        displayFraction = _this$props.displayFraction;
+      var cleanTotal = Math.max(0, parseInt(total) || 0);
+      var cleanCompleted = Math.max(0, Math.min(parseInt(completed) || 0, parseInt(cleanTotal)));
+      var barStyle = {
+        width: this.getCompletionPercentage(cleanCompleted, cleanTotal) + '%'
+      };
+      return /*#__PURE__*/_jsxs("div", {
+        className: "newspack-progress-bar",
+        children: [(label || displayFraction) && /*#__PURE__*/_jsxs("div", {
+          className: "newspack-progress-bar__headings",
+          children: [label && /*#__PURE__*/_jsx("h2", {
+            children: label
+          }), displayFraction && /*#__PURE__*/_jsx("p", {
+            className: "is-dark",
+            children: /*#__PURE__*/_jsxs("strong", {
+              children: [cleanCompleted, "/", cleanTotal]
+            })
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          className: "newspack-progress-bar__container",
+          children: /*#__PURE__*/_jsx("div", {
+            className: "newspack-progress-bar__bar",
+            style: barStyle,
+            "data-testid": "progress-bar-indicator"
           })
         })]
-      }), /*#__PURE__*/_jsx("div", {
-        className: "newspack-progress-bar__container",
-        children: /*#__PURE__*/_jsx("div", {
-          className: "newspack-progress-bar__bar",
-          style: barStyle,
-          "data-testid": "progress-bar-indicator"
-        })
-      })]
-    });
-  }
-}
+      });
+    }
+  }]);
+}(Component);
 export default ProgressBar;