newspack-components 4.2.0 → 4.4.0-alpha.1

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

@@ -1,75 +1,87 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _element = require("@wordpress/element");
 require("./style.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(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
- */
-
-/**
+ */ /**
  * WordPress dependencies.
- */
-
-/**
+ */ /**
  * Internal dependencies.
  */
-
-class ProgressBar extends _element.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() {
+    (0, _classCallCheck2["default"])(this, ProgressBar);
+    return _callSuper(this, ProgressBar, arguments);
   }
+  (0, _inherits2["default"])(ProgressBar, _Component);
+  return (0, _createClass2["default"])(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__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "newspack-progress-bar",
-      children: [(label || displayFraction) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "newspack-progress-bar__headings",
-        children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-          children: label
-        }), displayFraction && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          className: "is-dark",
-          children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "newspack-progress-bar",
+        children: [(label || displayFraction) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "newspack-progress-bar__headings",
+          children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+            children: label
+          }), displayFraction && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            className: "is-dark",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("strong", {
+              children: [cleanCompleted, "/", cleanTotal]
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "newspack-progress-bar__container",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "newspack-progress-bar__bar",
+            style: barStyle,
+            "data-testid": "progress-bar-indicator"
           })
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "newspack-progress-bar__container",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "newspack-progress-bar__bar",
-          style: barStyle,
-          "data-testid": "progress-bar-indicator"
-        })
-      })]
-    });
-  }
-}
-var _default = exports.default = ProgressBar;
+      });
+    }
+  }]);
+}(_element.Component);
+var _default = exports["default"] = ProgressBar;

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

@@ -1,57 +1,56 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@testing-library/react");
 var _ = _interopRequireDefault(require("./"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-describe('ProgressBar', () => {
-  it('should render a progress indicator', () => {
-    const {
-      getByTestId
-    } = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-      completed: "1",
-      total: "2"
-    }));
-    const indicator = getByTestId('progress-bar-indicator');
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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) { (0, _defineProperty2["default"])(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; }
+describe('ProgressBar', function () {
+  it('should render a progress indicator', function () {
+    var _render = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        completed: "1",
+        total: "2"
+      })),
+      getByTestId = _render.getByTestId;
+    var indicator = getByTestId('progress-bar-indicator');
     expect(indicator).toHaveAttribute('style', 'width: 50%;');
   });
-  it('should render a label', () => {
-    const label = 'test label';
-    const {
-      getByText
-    } = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-      completed: "1",
-      total: "2",
-      label: label
-    }));
+  it('should render a label', function () {
+    var label = 'test label';
+    var _render2 = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        completed: "1",
+        total: "2",
+        label: label
+      })),
+      getByText = _render2.getByText;
     expect(getByText(label)).toBeInTheDocument();
   });
-  it('should render progress as a fraction', () => {
-    const {
-      getByText
-    } = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-      completed: "1",
-      total: "2",
-      displayFraction: true
-    }));
+  it('should render progress as a fraction', function () {
+    var _render3 = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        completed: "1",
+        total: "2",
+        displayFraction: true
+      })),
+      getByText = _render3.getByText;
     expect(getByText('1/2')).toBeInTheDocument();
   });
-  it('should render with both label and fraction', () => {
-    const label = 'test label';
-    const {
-      getByText
-    } = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-      completed: "1",
-      total: "2",
-      label: label,
-      displayFraction: true
-    }));
+  it('should render with both label and fraction', function () {
+    var label = 'test label';
+    var _render4 = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        completed: "1",
+        total: "2",
+        label: label,
+        displayFraction: true
+      })),
+      getByText = _render4.getByText;
     expect(getByText(label)).toBeInTheDocument();
     expect(getByText('1/2')).toBeInTheDocument();
   });
-  describe('should calculate progress correctly', () => {
+  describe('should calculate progress correctly', function () {
     [{
       props: {
         completed: 1,
@@ -70,42 +69,37 @@ describe('ProgressBar', () => {
         total: 3
       },
       expectedWidth: 100
-    }].forEach(({
-      props,
-      expectedWidth
-    }) => {
-      it(`with expected  progress of ${expectedWidth}`, () => {
-        const {
-          getByTestId
-        } = (0, _react2.render)(/*#__PURE__*/(0, _react.createElement)(_.default, {
-          ...props,
-          key: expectedWidth
-        }));
-        expect(getByTestId('progress-bar-indicator')).toHaveAttribute('style', `width: ${expectedWidth}%;`);
+    }].forEach(function (_ref) {
+      var props = _ref.props,
+        expectedWidth = _ref.expectedWidth;
+      it("with expected  progress of ".concat(expectedWidth), function () {
+        var _render5 = (0, _react2.render)(/*#__PURE__*/(0, _react.createElement)(_["default"], _objectSpread(_objectSpread({}, props), {}, {
+            key: expectedWidth
+          }))),
+          getByTestId = _render5.getByTestId;
+        expect(getByTestId('progress-bar-indicator')).toHaveAttribute('style', "width: ".concat(expectedWidth, "%;"));
       });
     });
   });
-  it('should handle non-numeric values in ProgressBar element', () => {
-    const {
-      getByText,
-      getByTestId
-    } = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-      completed: "cats",
-      total: "dogs",
-      displayFraction: true
-    }));
+  it('should handle non-numeric values in ProgressBar element', function () {
+    var _render6 = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        completed: "cats",
+        total: "dogs",
+        displayFraction: true
+      })),
+      getByText = _render6.getByText,
+      getByTestId = _render6.getByTestId;
     expect(getByText('0/0')).toBeInTheDocument();
     expect(getByTestId('progress-bar-indicator')).toHaveAttribute('style', 'width: 100%;');
   });
-  it('should handle non-logical values in ProgressBar element', () => {
-    const {
-      getByText,
-      getByTestId
-    } = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-      completed: "3",
-      total: "-1",
-      displayFraction: true
-    }));
+  it('should handle non-logical values in ProgressBar element', function () {
+    var _render7 = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        completed: "3",
+        total: "-1",
+        displayFraction: true
+      })),
+      getByText = _render7.getByText,
+      getByTestId = _render7.getByTestId;
     expect(getByText('0/0')).toBeInTheDocument();
     expect(getByTestId('progress-bar-indicator')).toHaveAttribute('style', 'width: 100%;');
   });

package/dist/cjs/proxied-imports/router.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var ReactRouterDOM = _interopRequireWildcard(require("react-router-dom"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * 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 = exports.default = ReactRouterDOM;
+var _default = exports["default"] = ReactRouterDOM;

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

@@ -4,40 +4,53 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+var _excluded = ["className"];
+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) { (0, _defineProperty2["default"])(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 = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(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.
- */
-
-/**
+ */ /**
  * Internal dependencies.
- */
-
-/**
+ */ /**
  * External dependencies.
- */
-
-/**
+ */ /**
  * Radio Control.
- */class RadioControl extends _element.Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-radio-control', className);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RadioControl, {
-      className: classes,
-      ...otherProps
-    });
+ */
+var RadioControl = /*#__PURE__*/function (_Component) {
+  function RadioControl() {
+    (0, _classCallCheck2["default"])(this, RadioControl);
+    return _callSuper(this, RadioControl, arguments);
   }
-}
-var _default = exports.default = RadioControl;
+  (0, _inherits2["default"])(RadioControl, _Component);
+  return (0, _createClass2["default"])(RadioControl, [{
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        otherProps = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
+      var classes = (0, _classnames["default"])('newspack-radio-control', className);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RadioControl, _objectSpread({
+        className: classes
+      }, otherProps));
+    }
+  }]);
+}(_element.Component);
+var _default = exports["default"] = RadioControl;

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

@@ -4,8 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _icons = require("@wordpress/icons");
 var _ = require("..");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -18,6 +21,8 @@ var _jsxRuntime = require("react/jsx-runtime");
  * WordPress dependencies
  */
 
+// eslint-disable-line @wordpress/no-unsafe-wp-apis
+
 /**
  * Internal dependencies
  */
@@ -30,66 +35,165 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Represents a section header component.
  *
  * @typedef {Object} SectionHeaderProps
- * @property {boolean}           [centered=false] - Indicates if the header is centered.
- * @property {?string}           [className=null] - Additional CSS class name.
- * @property {string|Function|*} [description]    - Description of the section.
- * @property {number}            [heading=2]      - HTML heading level, e.g., 1 for h1, 2 for h2, etc.
- * @property {boolean}           [isWhite=false]  - Indicates if the header should use a white theme.
- * @property {boolean}           [noMargin=false] - Indicates if the header should have no margin.
- * @property {string}            title            - The title of the section.
- * @property {?string}           [id=null]        - Optional ID for the header element.
+ * @property {string}             [backNav='']       - URL to navigate back to.
+ * @property {string|string[]}    [badge]            - Badge to display in the header.
+ * @property {string}             [badgeLevel]       - Badge level, e.g., 'success', 'info', 'warning', 'error'.
+ * @property {boolean}            [centered=false]   - Indicates if the header is centered.
+ * @property {?string}            [className=null]   - Additional CSS class name.
+ * @property {string|Function|*}  [description]      - Description of the section.
+ * @property {number}             [heading=2]        - HTML heading level, e.g., 1 for h1, 2 for h2, etc.
+ * @property {string|Function|*}  [icon]             - Icon to display in the header.
+ * @property {boolean}            [isWhite=false]    - Indicates if the header should use a white theme.
+ * @property {boolean}            [noMargin=false]   - Indicates if the header should have no margin.
+ * @property {boolean}            [pageHeader=false] - Indicates if the header is used as a page header.
+ * @property {string}             title              - The title of the section.
+ * @property {?string}            [id=null]          - Optional ID for the header element.
+ * @property {?string|Function|*} [children=null]    - Optional children to display in the header.
  */
 
 /**
  * Creates a section header.
  *
  * @param {SectionHeaderProps} props - The properties for the section header.
- */const SectionHeader = ({
-  centered = false,
-  className = null,
-  description = '',
-  heading = 2,
-  isWhite = false,
-  noMargin = false,
-  title,
-  id = null
-}) => {
+ */var SectionHeader = function SectionHeader(_ref) {
+  var _ref$backNav = _ref.backNav,
+    backNav = _ref$backNav === void 0 ? '' : _ref$backNav,
+    badges = _ref.badges,
+    _ref$centered = _ref.centered,
+    centered = _ref$centered === void 0 ? false : _ref$centered,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? '' : _ref$description,
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? 2 : _ref$heading,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? null : _ref$icon,
+    _ref$isWhite = _ref.isWhite,
+    isWhite = _ref$isWhite === void 0 ? false : _ref$isWhite,
+    _ref$noMargin = _ref.noMargin,
+    noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
+    _ref$pageHeader = _ref.pageHeader,
+    pageHeader = _ref$pageHeader === void 0 ? false : _ref$pageHeader,
+    title = _ref.title,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? null : _ref$id,
+    menu = _ref.menu,
+    primaryAction = _ref.primaryAction,
+    secondaryAction = _ref.secondaryAction,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children;
   // If id is in the URL as a scrollTo param, scroll to it on render.
-  const ref = (0, _element.useRef)();
-  (0, _element.useEffect)(() => {
-    const params = new Proxy(new URLSearchParams(window.location.search), {
-      get: (searchParams, prop) => searchParams.get(prop)
+  var ref = (0, _element.useRef)();
+  (0, _element.useEffect)(function () {
+    var params = new Proxy(new URLSearchParams(window.location.search), {
+      get: function get(searchParams, prop) {
+        return searchParams.get(prop);
+      }
     });
-    const scrollToId = params.scrollTo;
+    var scrollToId = params.scrollTo;
     if (scrollToId && scrollToId === id) {
       // Let parent scroll action run before running this.
-      window.setTimeout(() => ref.current.scrollIntoView({
-        behavior: 'smooth'
-      }), 250);
+      window.setTimeout(function () {
+        return ref.current.scrollIntoView({
+          behavior: 'smooth'
+        });
+      }, 250);
     }
   }, []);
-  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 /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  var 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', pageHeader && 'newspack-section-header--page-header');
+  var HeadingTag = pageHeader ? 'h1' : "h".concat(heading);
+  var titleContent = null;
+  if (typeof title === 'string') {
+    titleContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "newspack-section-header__title-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(HeadingTag, {
+        children: [title, badges !== null && badges !== void 0 && badges.length ? badges.map(function (badge, i) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Badge, {
+            text: badge.label,
+            level: badge.level || 'default'
+          }, i);
+        }) : null]
+      }), (menu === null || menu === void 0 ? void 0 : menu.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
+        className: "newspack-section-header__menu",
+        icon: _icons.moreVertical,
+        label: (0, _i18n.__)('More options', 'newspack-plugin'),
+        children: function children() {
+          return menu.map(function (item, index) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
+              icon: item.icon,
+              href: item.href,
+              onClick: item.action,
+              disabled: item.disabled || false,
+              isDestructive: item.destructive || false,
+              children: item.label
+            }, index);
+          });
+        }
+      }), secondaryAction && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-section-header__secondary-action",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+          variant: "link",
+          href: secondaryAction.href,
+          onClick: secondaryAction.action,
+          children: secondaryAction.label
+        })
+      })]
+    });
+  } else if (typeof title === 'function') {
+    titleContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(HeadingTag, {
+      children: title()
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     id: id,
-    className: "newspack-section-header__container",
+    className: (0, _classnames["default"])('newspack-section-header__container', backNav && 'newspack-section-header--has-back-nav', primaryAction && 'newspack-section-header--has-primary-action', className),
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
       columns: 1,
       gutter: 8,
       className: classes,
-      children: [typeof title === 'string' && /*#__PURE__*/(0, _jsxRuntime.jsx)(HeadingTag, {
-        children: title
-      }), typeof title === 'function' && /*#__PURE__*/(0, _jsxRuntime.jsx)(HeadingTag, {
-        children: title()
-      }), description && typeof description === 'string' && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-section-header__icon",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+          icon: icon,
+          size: 48
+        })
+      }), backNav ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+        alignment: "left",
+        style: {
+          position: 'relative'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "newspack-section-header__back-nav",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
+            text: (0, _i18n.__)('Go back', 'newspack-plugin'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+              href: backNav,
+              icon: _icons.chevronLeft,
+              variant: "tertiary"
+            })
+          })
+        }), titleContent]
+      }) : titleContent, description && typeof description === 'string' && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         children: description
       }), typeof description === 'function' && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         children: description()
       }), description && typeof description !== 'string' && typeof description !== 'function' && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         children: description
+      }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-section-header__children",
+        children: children
       })]
-    })
+    }), primaryAction && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "newspack-section-header__primary-action",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+        href: primaryAction.href,
+        variant: "primary",
+        onClick: primaryAction.action,
+        children: primaryAction.label
+      })
+    })]
   });
 };
-var _default = exports.default = SectionHeader;
+var _default = exports["default"] = SectionHeader;