newspack-components 4.3.0 → 4.4.0-alpha.1

package/dist/cjs/image-upload/index.js

@@ -4,145 +4,136 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+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 _components = require("@wordpress/components");
 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; })(); } /**
  * Image Upload
- */
-
-/**
+ */ /**
  * WordPress dependencies.
- */
-
-/**
+ */ /**
  * Internal dependencies.
- */
-
-/**
+ */ /**
  * External dependencies.
  */
-
-class ImageUpload extends _element.Component {
+var ImageUpload = /*#__PURE__*/function (_Component) {
   /**
    * Constructor.
    */
-  constructor() {
-    super(...arguments);
-    this.state = {
-      frame: false
-    };
-  }
-
-  /**
-   * Open the WP media modal.
-   */
-  openModal = () => {
-    if (this.state.frame) {
-      this.state.frame.open();
-      return;
-    }
-    this.setState({
-      frame: wp.media({
-        title: (0, _i18n.__)('Select or upload image'),
-        button: {
-          text: (0, _i18n.__)('Select')
-        },
-        library: {
-          type: 'image'
-        },
-        multiple: false
-      })
-    }, () => {
-      this.state.frame.on('select', this.handleImageSelect);
-      this.state.frame.open();
+  function ImageUpload() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, ImageUpload);
+    _this = _callSuper(this, ImageUpload, arguments);
+    /**
+     * Open the WP media modal.
+     */
+    (0, _defineProperty2["default"])(_this, "openModal", function () {
+      if (_this.state.frame) {
+        _this.state.frame.open();
+        return;
+      }
+      _this.setState({
+        frame: wp.media({
+          title: (0, _i18n.__)('Select or upload image'),
+          button: {
+            text: (0, _i18n.__)('Select')
+          },
+          library: {
+            type: 'image'
+          },
+          multiple: false
+        })
+      }, function () {
+        _this.state.frame.on('select', _this.handleImageSelect);
+        _this.state.frame.open();
+      });
     });
-  };
-
-  /**
-   * Update the state when an image is selected from the media modal.
-   */
-  handleImageSelect = () => {
-    const {
-      onChange
-    } = this.props;
-    const attachment = this.state.frame.state().get('selection').first().toJSON();
-    onChange(attachment);
-  };
-
-  /**
-   * Render.
-   */
-  render = () => {
-    const {
-      buttonLabel,
-      className,
-      disabled,
-      help,
-      image,
-      info,
-      isCovering,
-      label,
-      onChange,
-      style = {}
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-image-upload__image', {
-      'newspack-image-upload__image--has-image': image
-    }, {
-      'newspack-image-upload__image--covering': isCovering
+    /**
+     * Update the state when an image is selected from the media modal.
+     */
+    (0, _defineProperty2["default"])(_this, "handleImageSelect", function () {
+      var onChange = _this.props.onChange;
+      var attachment = _this.state.frame.state().get('selection').first().toJSON();
+      onChange(attachment);
     });
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)('newspack-image-upload', className),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "newspack-image-upload__header",
-        children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-          className: "newspack-image-upload__label",
+    /**
+     * Render.
+     */
+    (0, _defineProperty2["default"])(_this, "render", function () {
+      var _this$props = _this.props,
+        buttonLabel = _this$props.buttonLabel,
+        className = _this$props.className,
+        disabled = _this$props.disabled,
+        help = _this$props.help,
+        image = _this$props.image,
+        isCovering = _this$props.isCovering,
+        label = _this$props.label,
+        onChange = _this$props.onChange,
+        _this$props$style = _this$props.style,
+        style = _this$props$style === void 0 ? {} : _this$props$style;
+      var classes = (0, _classnames["default"])('newspack-image-upload__image', {
+        'newspack-image-upload__image--has-image': image
+      }, {
+        'newspack-image-upload__image--covering': isCovering
+      });
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.BaseControl, {
+        __nextHasNoMarginBottom: true,
+        className: (0, _classnames["default"])('newspack-image-upload', className),
+        help: help,
+        children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
           children: label
-        }), info && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InfoButton, {
-          text: info
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: classes,
-        style: {
-          ...style
-        },
-        children: image?.url ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            "data-testid": "image-upload",
-            src: image.url,
-            alt: (0, _i18n.__)('Image preview', 'newspack-plugin')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "newspack-image-upload__controls",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-              disabled: disabled,
-              onClick: this.openModal,
-              isLink: true,
-              children: (0, _i18n.__)('Replace', 'newspack-plugin')
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "sep"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-              disabled: disabled,
-              onClick: () => onChange(null),
-              isLink: true,
-              isDestructive: true,
-              children: (0, _i18n.__)('Remove', 'newspack-plugin')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes,
+          style: style,
+          children: image !== null && image !== void 0 && image.url ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              "data-testid": "image-upload",
+              src: image.url,
+              alt: (0, _i18n.__)('Image preview', 'newspack-plugin')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "newspack-image-upload__controls",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+                disabled: disabled,
+                onClick: _this.openModal,
+                variant: "tertiary",
+                children: (0, _i18n.__)('Replace', 'newspack-plugin')
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+                disabled: disabled,
+                onClick: function onClick() {
+                  return onChange(null);
+                },
+                variant: "tertiary",
+                isDestructive: true,
+                children: (0, _i18n.__)('Remove', 'newspack-plugin')
+              })]
             })]
-          })]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-          disabled: disabled,
-          onClick: this.openModal,
-          isLink: true,
-          children: buttonLabel ? buttonLabel : (0, _i18n.__)('Upload', 'newspack-plugin')
-        })
-      }), help && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "newspack-image-upload__help",
-        children: help
-      })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+            disabled: disabled,
+            onClick: _this.openModal,
+            variant: "tertiary",
+            children: buttonLabel ? buttonLabel : (0, _i18n.__)('Upload', 'newspack-plugin')
+          })
+        })]
+      });
     });
-  };
-}
-var _default = exports.default = ImageUpload;
+    _this.state = {
+      frame: false
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(ImageUpload, _Component);
+  return (0, _createClass2["default"])(ImageUpload);
+}(_element.Component);
+var _default = exports["default"] = ImageUpload;

package/dist/cjs/image-upload/index.test.js

@@ -12,24 +12,22 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
-describe('ImageUpload', () => {
-  it('should render an add image button', () => {
-    const {
-      getByText
-    } = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {}));
+describe('ImageUpload', function () {
+  it('should render an add image button', function () {
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {})),
+      getByText = _render.getByText;
     expect(getByText('Upload')).toBeInTheDocument();
   });
-  it('should render replace and remove buttons if there is an image provided', () => {
-    const image = {
+  it('should render replace and remove buttons if there is an image provided', function () {
+    var image = {
       id: 1234,
       url: 'https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg'
     };
-    const {
-      getByText,
-      getByTestId
-    } = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-      image: image
-    }));
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        image: image
+      })),
+      getByText = _render2.getByText,
+      getByTestId = _render2.getByTestId;
     expect(getByText('Remove')).toBeInTheDocument();
     expect(getByText('Replace')).toBeInTheDocument();
     expect(getByTestId('image-upload')).toBeInTheDocument();

package/dist/cjs/image-upload/style.scss

@@ -3,45 +3,29 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-image-upload {
-	margin: 32px 0;
-	&__header {
-		display: flex;
-	}
-	&__label {
-		margin: 0 0 8px;
-	}
+	margin: wp-vars.$grid-unit-40 0;
 	&__image {
 		align-items: center;
+		background-position: center;
 		background-repeat: no-repeat;
 		background-size: contain;
-		background-position: center;
-		border: 1px dashed wp-colors.$gray-700;
-		border-radius: 2px;
+		border: 1px dashed wp-colors.$gray-600;
+		border-radius: wp-vars.$radius-small;
 		display: flex;
 		justify-content: center;
 		max-width: 100%;
-		min-height: 48px;
+		min-height: wp-vars.$grid-unit-50;
 		position: relative;
 		&--covering {
 			background-size: cover;
 		}
 		&:not(&--has-image) {
-			.newspack-button {
-				background: white !important;
-				border-radius: 2px !important;
-				padding: 4px 16px !important;
-
-				&:active,
-				&:focus,
-				&:hover {
-					background: white !important;
-				}
-
-				&:focus {
-					outline-offset: -3px !important;
-				}
+			.components-button {
+				justify-content: center;
+				width: calc(100% - 2px);
 			}
 		}
 		&--has-image {
@@ -49,8 +33,8 @@
 			overflow: hidden;
 			&::before,
 			&::after {
-				border: 1px solid rgba(black, 0.54);
-				border-radius: 2px;
+				border: 1px solid rgba(wp-colors.$black, 0.54);
+				border-radius: wp-vars.$radius-small;
 				content: "";
 				inset: 0;
 				position: absolute;
@@ -66,7 +50,7 @@
 				position: relative;
 			}
 			&::after {
-				background: rgba(white, 0.9);
+				background: rgba(wp-colors.$white, 0.95);
 				border-color: wp-colors.$gray-700;
 			}
 			&:focus-within,
@@ -80,20 +64,8 @@
 				max-height: 100%;
 				max-width: 100%;
 			}
-			.sep {
-				background: transparent;
-				display: block;
-				height: 8px;
-				margin: 0;
-				width: 100%;
-			}
 		}
 	}
-	&__image + &__help {
-		color: wp-colors.$gray-700;
-		font-size: 12px;
-		margin: 1em 0 0;
-	}
 	&__controls {
 		align-items: center;
 		display: flex;