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

package/dist/cjs/web-preview/index.js

@@ -4,7 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
@@ -13,179 +19,238 @@ var _ = require("../");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 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; })(); } /**
  * WordPress dependencies.
- */
-
-/**
+ */ /**
  * Internal dependencies.
- */
-
-/**
+ */ /**
  * External dependencies.
  */
-
-const PORTAL_PARENT_ID = 'newspack-components-web-preview-wrapper';
+var PORTAL_PARENT_ID = 'newspack-components-web-preview-wrapper';
 
 /**
  * Web Preview. A component to preview a website in an iframe, with device sizing options.
  */
-class WebPreview extends _element.Component {
-  state = {
-    device: 'desktop',
-    loaded: false,
-    isPreviewVisible: false
-  };
-  constructor(props) {
-    super(props);
-    this.iframeRef = (0, _element.createRef)();
+var WebPreview = /*#__PURE__*/function (_Component) {
+  function WebPreview(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, WebPreview);
+    _this = _callSuper(this, WebPreview, [props]);
+    (0, _defineProperty2["default"])(_this, "state", {
+      device: 'desktop',
+      loaded: false,
+      isPreviewVisible: false
+    });
+    /**
+     * Handle keyboard events
+     */
+    (0, _defineProperty2["default"])(_this, "handleKeyDown", function (event) {
+      if (event.key === 'Escape' && _this.state.isPreviewVisible) {
+        _this.closePreview();
+      }
+    });
+    /**
+     * Close the preview modal
+     */
+    (0, _defineProperty2["default"])(_this, "closePreview", function () {
+      var _this$props$onClose = _this.props.onClose,
+        onClose = _this$props$onClose === void 0 ? function () {} : _this$props$onClose;
+      onClose();
+      _this.setState({
+        isPreviewVisible: false,
+        loaded: false
+      });
+    });
+    /**
+     * Create JSX for the modal
+     */
+    (0, _defineProperty2["default"])(_this, "getWebPreviewModal", function () {
+      var _this$props = _this.props,
+        _this$props$beforeLoa = _this$props.beforeLoad,
+        beforeLoad = _this$props$beforeLoa === void 0 ? function () {} : _this$props$beforeLoa,
+        url = _this$props.url,
+        title = _this$props.title;
+      var _this$state = _this.state,
+        device = _this$state.device,
+        loaded = _this$state.loaded,
+        isPreviewVisible = _this$state.isPreviewVisible;
+      if (!_this.modalDOMElement || !isPreviewVisible) {
+        return null;
+      }
+      var classes = (0, _classnames["default"])('newspack-web-preview', device, loaded && 'is-loaded');
+      var icon = _icons.mobile;
+      if (device === 'desktop') {
+        icon = _icons.desktop;
+      } else if (device === 'tablet') {
+        icon = _icons.tablet;
+      }
+      beforeLoad();
+      return (0, _element.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "newspack-web-preview__interior",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "newspack-web-preview__toolbar",
+            children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "newspack-web-preview__toolbar-left",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+                children: title
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "newspack-web-preview__toolbar-right",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
+                icon: icon,
+                label: (0, _i18n.__)('Preview Size', 'newspack-plugin'),
+                children: function children(_ref) {
+                  var onDropdownClose = _ref.onClose;
+                  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
+                      icon: device === 'desktop' ? _icons.check : null,
+                      role: "menuitemradio",
+                      isSelected: device === 'desktop',
+                      onClick: function onClick() {
+                        _this.setState({
+                          device: 'desktop'
+                        });
+                        onDropdownClose();
+                      },
+                      children: (0, _i18n.__)('Desktop', 'newspack-plugin')
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
+                      icon: device === 'tablet' ? _icons.check : null,
+                      role: "menuitemradio",
+                      isSelected: device === 'tablet',
+                      onClick: function onClick() {
+                        _this.setState({
+                          device: 'tablet'
+                        });
+                        onDropdownClose();
+                      },
+                      children: (0, _i18n.__)('Tablet', 'newspack-plugin')
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
+                      icon: device === 'phone' ? _icons.check : null,
+                      role: "menuitemradio",
+                      isSelected: device === 'phone',
+                      onClick: function onClick() {
+                        _this.setState({
+                          device: 'phone'
+                        });
+                        onDropdownClose();
+                      },
+                      children: (0, _i18n.__)('Phone', 'newspack-plugin')
+                    })]
+                  });
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+                onClick: _this.closePreview,
+                icon: _icons.close,
+                label: (0, _i18n.__)('Close Preview', 'newspack-plugin')
+              })]
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "newspack-web-preview__content",
+            children: [!loaded && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "newspack-web-preview__is-waiting",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
+                isLeft: true
+              }), (0, _i18n.__)('Loading…', 'newspack-plugin')]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
+              ref: _this.iframeRef,
+              title: "web-preview",
+              src: url,
+              onLoad: function onLoad() {
+                _this.setState({
+                  loaded: true
+                });
+                _this.props.onLoad(_this.iframeRef.current);
+              }
+            })]
+          })]
+        })
+      }), _this.modalDOMElement);
+    });
+    (0, _defineProperty2["default"])(_this, "showPreview", function () {
+      _this.setState({
+        isPreviewVisible: true
+      });
+    });
+    _this.iframeRef = (0, _element.createRef)();
+    return _this;
   }
 
   /**
    * If a div with id PORTAL_PARENT_ID exists, assign it to class field.
    * If not, create it and append to the body.
    */
-  componentDidMount() {
-    const existingDOMElement = document.getElementById(PORTAL_PARENT_ID);
-    this.modalDOMElement = existingDOMElement || document.createElement('div');
-    if (!existingDOMElement) {
-      this.modalDOMElement.id = PORTAL_PARENT_ID;
-      document.body.appendChild(this.modalDOMElement);
+  (0, _inherits2["default"])(WebPreview, _Component);
+  return (0, _createClass2["default"])(WebPreview, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var existingDOMElement = document.getElementById(PORTAL_PARENT_ID);
+      this.modalDOMElement = existingDOMElement || document.createElement('div');
+      if (!existingDOMElement) {
+        this.modalDOMElement.id = PORTAL_PARENT_ID;
+        document.body.appendChild(this.modalDOMElement);
+      }
     }
-  }
 
-  /**
-   * Add or remove applicable body classes
-   */
-  componentDidUpdate() {
-    if (this.state.isPreviewVisible === true) {
-      document.body.classList.add('newspack-web-preview--open');
-    } else {
-      document.body.classList.remove('newspack-web-preview--open');
+    /**
+     * Add or remove applicable body classes and keyboard event listeners
+     */
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (this.state.isPreviewVisible === true) {
+        document.body.classList.add('newspack-web-preview--open');
+        if (prevState.isPreviewVisible === false) {
+          // Add event listener when modal opens
+          document.addEventListener('keydown', this.handleKeyDown);
+        }
+      } else {
+        document.body.classList.remove('newspack-web-preview--open');
+        if (prevState.isPreviewVisible === true) {
+          // Remove event listener when modal closes
+          document.removeEventListener('keydown', this.handleKeyDown);
+        }
+      }
     }
-  }
 
-  /**
-   * Create JSX for the modal
-   */
-  getWebPreviewModal = () => {
-    const {
-      beforeLoad = () => {},
-      onClose = () => {},
-      url
-    } = this.props;
-    const {
-      device,
-      loaded,
-      isPreviewVisible
-    } = this.state;
-    if (!this.modalDOMElement || !isPreviewVisible) {
-      return null;
+    /**
+     * Clean up event listeners on unmount
+     */
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('keydown', this.handleKeyDown);
+      document.body.classList.remove('newspack-web-preview--open');
     }
-    const classes = (0, _classnames.default)('newspack-web-preview', device, loaded && 'is-loaded');
-    beforeLoad();
-    return (0, _element.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: classes,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "newspack-web-preview__interior",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "newspack-web-preview__toolbar",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "newspack-web-preview__toolbar-left",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ButtonGroup, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-                onClick: () => this.setState({
-                  device: 'desktop'
-                }),
-                variant: 'desktop' === device && 'primary',
-                icon: _icons.desktop,
-                label: (0, _i18n.__)('Preview Desktop Size', 'newspack-plugin')
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-                onClick: () => this.setState({
-                  device: 'tablet'
-                }),
-                variant: 'tablet' === device && 'primary',
-                icon: _icons.tablet,
-                label: (0, _i18n.__)('Preview Tablet Size', 'newspack-plugin')
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-                onClick: () => this.setState({
-                  device: 'phone'
-                }),
-                variant: 'phone' === device && 'primary',
-                icon: _icons.mobile,
-                label: (0, _i18n.__)('Preview Phone Size', 'newspack-plugin')
-              })]
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "newspack-web-preview__toolbar-right",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-              onClick: () => {
-                onClose();
-                this.setState({
-                  isPreviewVisible: false,
-                  loaded: false
-                });
-              },
-              icon: _icons.closeSmall,
-              label: (0, _i18n.__)('Close Preview', 'newspack-plugin')
-            })
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "newspack-web-preview__content",
-          children: [!loaded && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "newspack-web-preview__is-waiting",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
-              isLeft: true
-            }), (0, _i18n.__)('Loading…', 'newspack-plugin')]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
-            ref: this.iframeRef,
-            title: "web-preview",
-            src: url,
-            onLoad: () => {
-              this.setState({
-                loaded: true
-              });
-              this.props.onLoad(this.iframeRef.current);
-            }
-          })]
-        })]
-      })
-    }), this.modalDOMElement);
-  };
-  showPreview = () => {
-    this.setState({
-      isPreviewVisible: true
-    });
-  };
-
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      label,
-      variant,
-      /**
-       * Inversion of control - let the caller render
-       * the button that will trigger the modal
-       */
-      renderButton
-    } = this.props;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
-      children: [renderButton ? renderButton({
-        showPreview: this.showPreview
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-        variant: variant,
-        onClick: this.showPreview,
-        tabIndex: "0",
-        children: label
-      }), this.getWebPreviewModal()]
-    });
-  }
-}
+  }, {
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this$props2 = this.props,
+        label = _this$props2.label,
+        variant = _this$props2.variant,
+        renderButton = _this$props2.renderButton;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+        children: [renderButton ? renderButton({
+          showPreview: this.showPreview
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          variant: variant,
+          onClick: this.showPreview,
+          tabIndex: "0",
+          children: label
+        }), this.getWebPreviewModal()]
+      });
+    }
+  }]);
+}(_element.Component);
 WebPreview.defaultProps = {
   url: '//newspack.com',
   label: (0, _i18n.__)('Preview', 'newspack-plugin'),
-  onLoad: () => {}
+  onLoad: function onLoad() {}
 };
-var _default = exports.default = WebPreview;
+var _default = exports["default"] = WebPreview;

package/dist/cjs/web-preview/style.scss

@@ -13,8 +13,10 @@
 	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
 	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
 	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
+	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
 
-	background: #{colors.$neutral-700};
+	background: color-mix(in srgb, colors.$neutral-1000, transparent 65%);
 	box-sizing: border-box;
 	height: 100%;
 	left: 0;
@@ -27,11 +29,11 @@
 	z-index: 99999;
 
 	&.phone iframe {
-		max-width: 380px;
+		max-width: 360px;
 	}
 
 	&.tablet iframe {
-		max-width: 768px;
+		max-width: 780px;
 	}
 
 	&.is-loaded iframe {
@@ -46,7 +48,7 @@
 		animation: appear-animation 125ms ease-in-out;
 		animation-fill-mode: forwards;
 		background: white;
-		border-radius: 2px;
+		border-radius: 8px;
 		overflow: hidden;
 		height: 100%;
 		width: 100%;
@@ -54,19 +56,18 @@
 
 	&__content {
 		background: wp-colors.$gray-100;
-		height: calc(100% - 49px);
+		height: calc(100% - 72px);
 		-webkit-overflow-scrolling: touch;
 		overflow-x: hidden;
 		width: 100%;
 
 		iframe {
-			background: #fff;
+			background: white;
 			display: block;
 			height: 100%;
 			margin: 0 auto;
 			max-width: 100%;
 			opacity: 0;
-			outline: 1px solid wp-colors.$gray-300;
 			padding: 0;
 			pointer-events: all;
 			transition: max-width 125ms ease-in-out, opacity 250ms ease-in-out;
@@ -85,62 +86,28 @@
 	}
 
 	&__toolbar {
+		align-items: center;
 		border-bottom: 1px solid wp-colors.$gray-300;
 		display: flex;
-		padding: 6px;
+		gap: 16px;
+		justify-content: space-between;
+		min-height: 71px;
+		padding: 12px 24px;
 
 		&-left {
-			flex: 0 0 auto;
+			display: flex;
 
-			.newspack-button-group {
-				display: flex;
+			h3 {
 				margin: 0;
 			}
-
-			.newspack-button {
-				display: none;
-				padding: 0 !important;
-
-				&.is-selected {
-					background: var(--wp-admin-theme-color);
-					color: white;
-
-					&:active,
-					&:focus,
-					&:hover {
-						box-shadow: none !important;
-						color: white;
-						outline: none;
-					}
-
-					&:focus {
-						box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color), inset 0 0 0 3px white !important;
-					}
-				}
-
-				@media screen and ( min-width: 528px ) {
-					&.is-phone,
-					&.is-tablet {
-						display: flex;
-					}
-				}
-
-				@media screen and ( min-width: 816px ) {
-					&.is-desktop {
-						display: flex;
-					}
-				}
-			}
 		}
 
 		&-right {
-			display: flex;
-			flex: 1;
-			justify-content: flex-end;
-		}
-
-		.newspack-button {
-			border-radius: 0 !important;
+			display: grid;
+			gap: 8px;
+			grid-template-columns: repeat(2, 1fr);
+			justify-self: end;
+			margin-left: auto;
 		}
 	}
 }