newspack-components 4.2.0 → 4.4.0-epic-editor-refactor.1

package/dist/esm/custom-select-control/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"];
+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; })(); }
 /**
  * Custom Select Control
  */
@@ -18,20 +30,27 @@ import classnames from 'classnames';
  */
 import './style.scss';
 import { jsx as _jsx } from "react/jsx-runtime";
-class CustomSelectControl extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-custom-select-control', className);
-    return /*#__PURE__*/_jsx(BaseComponent, {
-      className: classes,
-      ...otherProps
-    });
+var CustomSelectControl = /*#__PURE__*/function (_Component) {
+  function CustomSelectControl() {
+    _classCallCheck(this, CustomSelectControl);
+    return _callSuper(this, CustomSelectControl, arguments);
   }
-}
+  _inherits(CustomSelectControl, _Component);
+  return _createClass(CustomSelectControl, [{
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        otherProps = _objectWithoutProperties(_this$props, _excluded);
+      var classes = classnames('newspack-custom-select-control', className);
+      return /*#__PURE__*/_jsx(BaseComponent, _objectSpread({
+        className: classes
+      }, otherProps));
+    }
+  }]);
+}(Component);
 export default CustomSelectControl;

package/dist/esm/dataviews/index.js

@@ -0,0 +1,34 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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) { _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; }
+/**
+ * DataViews
+ *
+ * Wrapper around @wordpress/dataviews with Newspack styling.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { DataViews as BaseDataViews } from '@wordpress/dataviews';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function DataViews(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("div", {
+    className: classnames('newspack-dataviews', className),
+    children: /*#__PURE__*/_jsx(BaseDataViews, _objectSpread({}, props))
+  });
+}

package/dist/esm/dataviews/style.scss

@@ -0,0 +1,9 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@wordpress/dataviews/build-style/style.css";
+
+.newspack-dataviews {
+	/* Make sure full-width DataViews aligns with the 48px margin. */
+	.newspack-wizard__content--full-width & {
+		margin-top: -16px;
+	}
+}

package/dist/esm/divider/index.js

@@ -0,0 +1,42 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["alignment", "className", "marginBottom", "marginTop", "variant"];
+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; }
+/**
+ * Divider
+ */
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Divider = function Divider(_ref) {
+  var _ref$alignment = _ref.alignment,
+    alignment = _ref$alignment === void 0 ? 'none' : _ref$alignment,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    _ref$marginBottom = _ref.marginBottom,
+    marginBottom = _ref$marginBottom === void 0 ? 64 : _ref$marginBottom,
+    _ref$marginTop = _ref.marginTop,
+    marginTop = _ref$marginTop === void 0 ? 64 : _ref$marginTop,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames('newspack-divider', className, alignment && "newspack-divider--alignment-".concat(alignment), variant && "newspack-divider--variant-".concat(variant));
+  var style = {
+    '--divider-margin-bottom': typeof marginBottom === 'number' ? "".concat(marginBottom, "px") : marginBottom,
+    '--divider-margin-top': typeof marginTop === 'number' ? "".concat(marginTop, "px") : marginTop
+  };
+  return /*#__PURE__*/_jsx("hr", _objectSpread({
+    className: classes,
+    style: style
+  }, otherProps));
+};
+export default Divider;

package/dist/esm/divider/style.scss

@@ -0,0 +1,51 @@
+/**
+ * Divider
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-divider {
+	background: transparent;
+	border: 0;
+	display: block;
+	height: 1px;
+	margin-bottom: min(32px, var(--divider-margin-bottom, 64px));
+	margin-left: 0;
+	margin-right: 0;
+	margin-top: min(32px, var(--divider-margin-top, 64px));
+	padding: 0;
+
+	@media screen and (min-width: 783px) {
+		margin-bottom: var(--divider-margin-bottom, 64px);
+		margin-top: var(--divider-margin-top, 64px);
+	}
+
+	// Alignment
+
+	&--alignment-full-width {
+		margin-left: calc(-50vw + 50%);
+		width: 100vw;
+	}
+
+	&--alignment-none {
+		width: 100%;
+	}
+
+	// Variant
+
+	&--variant-default {
+		background-color: wp-colors.$gray-300;
+	}
+
+	&--variant-primary {
+		background-color: var(--wp-admin-theme-color);
+	}
+
+	&--variant-secondary {
+		background-color: wp-colors.$gray-900;
+	}
+
+	&--variant-tertiary {
+		background-color: wp-colors.$gray-100;
+	}
+}

package/dist/esm/footer/index.js

@@ -13,21 +13,26 @@ import { ExternalLink } from '@wordpress/components';
  */
 import './style.scss';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Footer = ({
-  simple = undefined
-}) => {
-  const {
-    components_demo: componentsDemo = false,
-    support = false,
-    setup_wizard: setupWizard = false,
-    reset_url: resetUrl = false,
-    plugin_version: pluginVersion = {
+var Footer = function Footer(_ref) {
+  var _ref$simple = _ref.simple,
+    simple = _ref$simple === void 0 ? undefined : _ref$simple;
+  var _ref2 = window.newspack_urls || {},
+    _ref2$components_demo = _ref2.components_demo,
+    componentsDemo = _ref2$components_demo === void 0 ? false : _ref2$components_demo,
+    _ref2$support = _ref2.support,
+    support = _ref2$support === void 0 ? false : _ref2$support,
+    _ref2$setup_wizard = _ref2.setup_wizard,
+    setupWizard = _ref2$setup_wizard === void 0 ? false : _ref2$setup_wizard,
+    _ref2$reset_url = _ref2.reset_url,
+    resetUrl = _ref2$reset_url === void 0 ? false : _ref2$reset_url,
+    _ref2$plugin_version = _ref2.plugin_version,
+    pluginVersion = _ref2$plugin_version === void 0 ? {
       label: 'Newspack'
-    },
-    remove_starter_content: removeStarterContent = false,
-    support_email: supportEmail
-  } = window.newspack_urls || {};
-  const footerElements = [{
+    } : _ref2$plugin_version,
+    _ref2$remove_starter_ = _ref2.remove_starter_content,
+    removeStarterContent = _ref2$remove_starter_ === void 0 ? false : _ref2$remove_starter_,
+    supportEmail = _ref2.support_email;
+  var footerElements = [{
     label: pluginVersion.label,
     url: 'https://newspack.com/category/release-notes/',
     external: true
@@ -67,25 +72,26 @@ const Footer = ({
   if (supportEmail) {
     footerElements.push({
       label: __('Contact Support', 'newspack-plugin'),
-      url: `mailto:${supportEmail}`
+      url: "mailto:".concat(supportEmail)
     });
   }
   return /*#__PURE__*/_jsx("div", {
     className: "newspack-footer",
     children: !simple && /*#__PURE__*/_jsx("ul", {
-      children: footerElements.map(({
-        url,
-        label,
-        external
-      }, index) => /*#__PURE__*/_jsx("li", {
-        children: external ? /*#__PURE__*/_jsx(ExternalLink, {
-          href: url,
-          children: label
-        }) : /*#__PURE__*/_jsx("a", {
-          href: url,
-          children: label
-        })
-      }, index))
+      children: footerElements.map(function (_ref3, index) {
+        var url = _ref3.url,
+          label = _ref3.label,
+          external = _ref3.external;
+        return /*#__PURE__*/_jsx("li", {
+          children: external ? /*#__PURE__*/_jsx(ExternalLink, {
+            href: url,
+            children: label
+          }) : /*#__PURE__*/_jsx("a", {
+            href: url,
+            children: label
+          })
+        }, index);
+      })
     })
   });
 };

package/dist/esm/form-token-field/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", "description", "hideHelpFromVision", "hideLabelFromVision"];
+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; })(); }
 /**
  * Form Token Field
  */
@@ -18,32 +30,39 @@ import './style.scss';
  */
 import classnames from 'classnames';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-class FormTokenField extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      description,
-      hideHelpFromVision,
-      hideLabelFromVision,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-form-token-field__input-container', className);
-    return /*#__PURE__*/_jsxs("div", {
-      className: classnames({
-        'newspack-form-token-field--label-hidden': hideLabelFromVision,
-        'newspack-form-token-field--help-hidden': hideHelpFromVision
-      }, 'newspack-form-token-field'),
-      children: [/*#__PURE__*/_jsx(BaseComponent, {
-        className: classes,
-        ...otherProps
-      }), description && /*#__PURE__*/_jsx("p", {
-        className: "newspack-form-token-field__help",
-        children: description
-      })]
-    });
+var FormTokenField = /*#__PURE__*/function (_Component) {
+  function FormTokenField() {
+    _classCallCheck(this, FormTokenField);
+    return _callSuper(this, FormTokenField, arguments);
   }
-}
+  _inherits(FormTokenField, _Component);
+  return _createClass(FormTokenField, [{
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        description = _this$props.description,
+        hideHelpFromVision = _this$props.hideHelpFromVision,
+        hideLabelFromVision = _this$props.hideLabelFromVision,
+        otherProps = _objectWithoutProperties(_this$props, _excluded);
+      var classes = classnames('newspack-form-token-field__input-container', className);
+      return /*#__PURE__*/_jsxs("div", {
+        className: classnames({
+          'newspack-form-token-field--label-hidden': hideLabelFromVision,
+          'newspack-form-token-field--help-hidden': hideHelpFromVision
+        }, 'newspack-form-token-field'),
+        children: [/*#__PURE__*/_jsx(BaseComponent, _objectSpread({
+          className: classes
+        }, otherProps)), description && /*#__PURE__*/_jsx("p", {
+          className: "newspack-form-token-field__help",
+          children: description
+        })]
+      });
+    }
+  }]);
+}(Component);
 export default FormTokenField;

package/dist/esm/form-token-field/style.scss

@@ -7,11 +7,6 @@
 .newspack-form-token-field {
 	width: 100%;
 
-	.components-form-token-field__input-container {
-		padding-bottom: 1px;
-		padding-top: 1px;
-	}
-
 	// Help
 
 	&__help {

package/dist/esm/global-notices/index.js

@@ -8,12 +8,12 @@ import { parse } from 'qs';
  */
 import { Notice } from '../';
 import { jsx as _jsx } from "react/jsx-runtime";
-const GlobalNotices = () => {
-  const notice = parse(window.location.search)['newspack-notice'];
+var GlobalNotices = function GlobalNotices() {
+  var notice = parse(window.location.search)['newspack-notice'];
   if (!notice) {
     return null;
   }
-  return notice.split(',').map((text, i) => {
+  return notice.split(',').map(function (text, i) {
     if (text.indexOf('_error_') === 0) {
       return /*#__PURE__*/_jsx(Notice, {
         isError: true,

package/dist/esm/grid/index.js

@@ -1,3 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "borders", "columns", "gutter", "noMargin", "rowGap"];
+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; }
 /**
  * Grid
  */
@@ -12,18 +17,23 @@ import './style.scss';
  */
 import classnames from 'classnames';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Grid = ({
-  className = '',
-  columns = 2,
-  gutter = 32,
-  noMargin = false,
-  rowGap = 0,
-  ...otherProps
-}) => {
-  const classes = classnames('newspack-grid', noMargin && 'newspack-grid--no-margin', columns && 'newspack-grid__columns-' + columns, gutter && 'newspack-grid__gutter-' + gutter, rowGap && 'newspack-grid__row-gap-' + rowGap, className);
-  return /*#__PURE__*/_jsx("div", {
-    className: classes,
-    ...otherProps
-  });
+var Grid = function Grid(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$borders = _ref.borders,
+    borders = _ref$borders === void 0 ? false : _ref$borders,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? 2 : _ref$columns,
+    _ref$gutter = _ref.gutter,
+    gutter = _ref$gutter === void 0 ? 32 : _ref$gutter,
+    _ref$noMargin = _ref.noMargin,
+    noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
+    _ref$rowGap = _ref.rowGap,
+    rowGap = _ref$rowGap === void 0 ? 0 : _ref$rowGap,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var classes = classnames('newspack-grid', borders && 'newspack-grid__borders', noMargin && 'newspack-grid--no-margin', columns && 'newspack-grid__columns-' + columns, gutter && 'newspack-grid__gutter-' + gutter, rowGap && 'newspack-grid__row-gap-' + rowGap, className);
+  return /*#__PURE__*/_jsx("div", _objectSpread({
+    className: classes
+  }, otherProps));
 };
 export default Grid;

package/dist/esm/grid/style.scss

@@ -13,7 +13,7 @@
 
 	// No Margin
 	&--no-margin {
-		margin: 0;
+		margin: 0 !important;
 	}
 
 	// Gutter 0
@@ -41,6 +41,11 @@
 		grid-gap: 32px;
 	}
 
+	// Gutter 64
+	&__gutter-64 {
+		grid-gap: 64px;
+	}
+
 	// Row Gap 0
 	&__row-gap-0 {
 		grid-row-gap: 0;
@@ -61,11 +66,6 @@
 		grid-row-gap: 32px;
 	}
 
-	// Gutter 64
-	&__gutter-64 {
-		grid-gap: 64px;
-	}
-
 	// Columns 6
 	&__columns-6 {
 		grid-template-columns: repeat(2, 1fr);
@@ -77,6 +77,14 @@
 		&__columns-3,
 		&__columns-4 {
 			grid-template-columns: repeat(2, 1fr);
+
+			> [start] {
+				grid-column-start: 1;
+			}
+
+			> [end] {
+				grid-column-end: -1;
+			}
 		}
 
 		&__columns-6 {
@@ -84,8 +92,8 @@
 		}
 	}
 
-	// Media Queries - 1128px
-	@media screen and ( min-width: 1128px ) {
+	// Media Queries - 1054px
+	@media screen and ( min-width: 1054px ) {
 		// Columns 3
 		&__columns-3 {
 			grid-template-columns: repeat(3, 1fr);
@@ -94,6 +102,14 @@
 		// Columns 4
 		&__columns-4 {
 			grid-template-columns: repeat(4, 1fr);
+
+			> [start="2"] {
+				grid-column-start: 2;
+			}
+
+			> [end="4"] {
+				grid-column-end: 4;
+			}
 		}
 
 		// Columns 6
@@ -101,6 +117,11 @@
 			grid-template-columns: repeat(6, 1fr);
 		}
 
+		// Columns 12
+		&__columns-12 {
+			grid-template-columns: repeat(12, 1fr);
+		}
+
 		// Gutter 48
 		&__gutter-48 {
 			grid-gap: 48px;
@@ -116,6 +137,44 @@
 	> * {
 		margin-bottom: 0 !important;
 		margin-top: 0 !important;
+		> h1:first-child,
+		> h2:first-child,
+		> h3:first-child,
+		> h4:first-child,
+		> h5:first-child,
+		> h6:first-child {
+			margin-top: 0;
+		}
+	}
+
+	// Borders
+	&__borders {
+		grid-gap: 0 !important;
+		> * {
+			border-bottom: 1px solid wp-colors.$gray-300;
+			&:last-child {
+				border-bottom: none;
+			}
+			@media screen and ( min-width: 744px ) {
+				border-bottom: none;
+				border-right: 1px solid wp-colors.$gray-300;
+				&:last-child {
+					border-right: none;
+				}
+			}
+		}
+		&.newspack-grid__gutter-8 > * {
+			padding: 8px;
+		}
+		&.newspack-grid__gutter-16 > * {
+			padding: 16px;
+		}
+		&.newspack-grid__gutter-32 > * {
+			padding: 32px;
+		}
+		&.newspack-grid__gutter-64 > * {
+			padding: 64px;
+		}
 	}
 
 	.components-base-control {