newspack-components 2.0.3 → 2.2.0

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

@@ -1,47 +1,44 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _element = require("@wordpress/element");
-
 var _i18n = require("@wordpress/i18n");
-
 var _ = require("../");
-
 require("./style.scss");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Image Upload
  */
-
 /**
  * WordPress dependencies.
  */
+/**
+ * Internal dependencies.
+ */
 const __ = _i18n.__;
-
+/**
+ * External dependencies.
+ */
 class ImageUpload extends _element.Component {
   /**
    * Constructor.
    */
   constructor() {
     super(...arguments);
+    /**
+     * Open the WP media modal.
+     */
     (0, _defineProperty2.default)(this, "openModal", () => {
       if (this.state.frame) {
         this.state.frame.open();
         return;
       }
-
       this.setState({
         frame: wp.media({
           title: __('Select or upload image'),
@@ -58,6 +55,9 @@ class ImageUpload extends _element.Component {
         this.state.frame.open();
       });
     });
+    /**
+     * Update the state when an image is selected from the media modal.
+     */
     (0, _defineProperty2.default)(this, "handleImageSelect", () => {
       const {
         onChange
@@ -65,10 +65,14 @@ class ImageUpload extends _element.Component {
       const attachment = this.state.frame.state().get('selection').first().toJSON();
       onChange(attachment);
     });
+    /**
+     * Render.
+     */
     (0, _defineProperty2.default)(this, "render", () => {
       const {
         buttonLabel,
         className,
+        disabled,
         help,
         image,
         info,
@@ -94,9 +98,10 @@ class ImageUpload extends _element.Component {
           })]
         }), (0, _jsxRuntime.jsx)("div", {
           className: classes,
-          style: { ...style
+          style: {
+            ...style
           },
-          children: image !== null && image !== void 0 && image.url ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: image?.url ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [(0, _jsxRuntime.jsx)("img", {
               "data-testid": "image-upload",
               src: image.url,
@@ -104,12 +109,14 @@ class ImageUpload extends _element.Component {
             }), (0, _jsxRuntime.jsxs)("div", {
               className: "newspack-image-upload__controls",
               children: [(0, _jsxRuntime.jsx)(_.Button, {
+                disabled: disabled,
                 onClick: this.openModal,
                 isLink: true,
                 children: __('Replace', 'newspack')
               }), (0, _jsxRuntime.jsx)("span", {
                 className: "sep"
               }), (0, _jsxRuntime.jsx)(_.Button, {
+                disabled: disabled,
                 onClick: () => onChange(null),
                 isLink: true,
                 isDestructive: true,
@@ -117,6 +124,7 @@ class ImageUpload extends _element.Component {
               })]
             })]
           }) : (0, _jsxRuntime.jsx)(_.Button, {
+            disabled: disabled,
             onClick: this.openModal,
             isLink: true,
             children: buttonLabel ? buttonLabel : __('Upload', 'newspack')
@@ -131,12 +139,6 @@ class ImageUpload extends _element.Component {
       frame: false
     };
   }
-  /**
-   * Open the WP media modal.
-   */
-
-
 }
-
 var _default = ImageUpload;
 exports.default = _default;

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

@@ -1,15 +1,10 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@testing-library/react");
-
 var _ = _interopRequireDefault(require("./"));
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 describe('ImageUpload', () => {
   it('should render an add image button', () => {
     const {

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

@@ -2,8 +2,7 @@
  * Image Upload
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-image-upload {
 	margin: 32px 0;
@@ -11,18 +10,15 @@
 		display: flex;
 	}
 	&__label {
-		color: $gray-900;
-		font-size: 14px;
-		font-weight: bold;
-		line-height: 24px;
+		margin: 0 0 8px;
 	}
 	&__image {
 		align-items: center;
 		background-repeat: no-repeat;
 		background-size: contain;
 		background-position: center;
-		border: 1px dashed $gray-300;
-		border-radius: 3px;
+		border: 1px dashed wp-colors.$gray-700;
+		border-radius: 2px;
 		display: flex;
 		justify-content: center;
 		max-width: 100%;
@@ -34,7 +30,7 @@
 		&:not( &--has-image ) {
 			.newspack-button {
 				background: white !important;
-				border-radius: 3px !important;
+				border-radius: 2px !important;
 				padding: 4px 16px !important;
 
 				&:active,
@@ -53,14 +49,11 @@
 			overflow: hidden;
 			&::before,
 			&::after {
-				border: 1px solid rgba( black, 0.125 );
-				border-radius: 3px;
-				bottom: 0;
+				border: 1px solid rgba( black, 0.54 );
+				border-radius: 2px;
 				content: '';
-				left: 0;
+				inset: 0;
 				position: absolute;
-				right: 0;
-				top: 0;
 				z-index: 0;
 			}
 			button,
@@ -74,7 +67,7 @@
 			}
 			&::after {
 				background: rgba( white, 0.9 );
-				border-color: $gray-300;
+				border-color: wp-colors.$gray-700;
 			}
 			&:focus-within,
 			&:hover {
@@ -97,7 +90,9 @@
 		}
 	}
 	&__image + &__help {
-		margin: 0;
+		color: wp-colors.$gray-700;
+		font-size: 12px;
+		margin: 1em 0 0;
 	}
 	&__controls {
 		align-items: center;

package/dist/cjs/index.js

@@ -1,10 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Accordion", {
+  enumerable: true,
+  get: function () {
+    return _accordion.default;
+  }
+});
 Object.defineProperty(exports, "ActionCard", {
   enumerable: true,
   get: function () {
@@ -35,12 +40,6 @@ Object.defineProperty(exports, "ButtonCard", {
     return _buttonCard.default;
   }
 });
-Object.defineProperty(exports, "ButtonGroup", {
-  enumerable: true,
-  get: function () {
-    return _buttonGroup.default;
-  }
-});
 Object.defineProperty(exports, "Card", {
   enumerable: true,
   get: function () {
@@ -53,12 +52,6 @@ Object.defineProperty(exports, "CategoryAutocomplete", {
     return _categoryAutocomplete.default;
   }
 });
-Object.defineProperty(exports, "CheckboxControl", {
-  enumerable: true,
-  get: function () {
-    return _checkboxControl.default;
-  }
-});
 Object.defineProperty(exports, "ColorPicker", {
   enumerable: true,
   get: function () {
@@ -107,6 +100,12 @@ Object.defineProperty(exports, "Handoff", {
     return _handoff.default;
   }
 });
+Object.defineProperty(exports, "HandoffMessage", {
+  enumerable: true,
+  get: function () {
+    return _handoffMessage.default;
+  }
+});
 Object.defineProperty(exports, "ImageUpload", {
   enumerable: true,
   get: function () {
@@ -173,12 +172,6 @@ Object.defineProperty(exports, "Popover", {
     return _popover.default;
   }
 });
-Object.defineProperty(exports, "PreviewBox", {
-  enumerable: true,
-  get: function () {
-    return _previewBox.default;
-  }
-});
 Object.defineProperty(exports, "ProgressBar", {
   enumerable: true,
   get: function () {
@@ -215,40 +208,34 @@ Object.defineProperty(exports, "Settings", {
     return _settings.default;
   }
 });
-Object.defineProperty(exports, "StyleCard", {
+Object.defineProperty(exports, "StepsList", {
   enumerable: true,
   get: function () {
-    return _styleCard.default;
+    return _stepsList.default;
   }
 });
-Object.defineProperty(exports, "TabbedNavigation", {
+Object.defineProperty(exports, "StepsListItem", {
   enumerable: true,
   get: function () {
-    return _tabbedNavigation.default;
+    return _stepsListItem.default;
   }
 });
-Object.defineProperty(exports, "TextControl", {
-  enumerable: true,
-  get: function () {
-    return _textControl.default;
-  }
-});
-Object.defineProperty(exports, "TextareaControl", {
+Object.defineProperty(exports, "StyleCard", {
   enumerable: true,
   get: function () {
-    return _textareaControl.default;
+    return _styleCard.default;
   }
 });
-Object.defineProperty(exports, "ToggleControl", {
+Object.defineProperty(exports, "TabbedNavigation", {
   enumerable: true,
   get: function () {
-    return _toggleControl.default;
+    return _tabbedNavigation.default;
   }
 });
-Object.defineProperty(exports, "ToggleGroup", {
+Object.defineProperty(exports, "TextControl", {
   enumerable: true,
   get: function () {
-    return _toggleGroup.default;
+    return _textControl.default;
   }
 });
 Object.defineProperty(exports, "Waiting", {
@@ -263,10 +250,10 @@ Object.defineProperty(exports, "WebPreview", {
     return _webPreview.default;
   }
 });
-Object.defineProperty(exports, "WizardPagination", {
+Object.defineProperty(exports, "Wizard", {
   enumerable: true,
   get: function () {
-    return _wizardPagination.default;
+    return _wizard.default;
   }
 });
 Object.defineProperty(exports, "hooks", {
@@ -293,99 +280,50 @@ Object.defineProperty(exports, "withWizardScreen", {
     return _withWizardScreen.default;
   }
 });
-
+var _accordion = _interopRequireDefault(require("./accordion"));
 var _actionCard = _interopRequireDefault(require("./action-card"));
-
 var _autocompleteTokenfield = _interopRequireDefault(require("./autocomplete-tokenfield"));
-
 var _autocompleteWithSuggestions = _interopRequireDefault(require("./autocomplete-with-suggestions"));
-
 var _button = _interopRequireDefault(require("./button"));
-
 var _buttonCard = _interopRequireDefault(require("./button-card"));
-
-var _buttonGroup = _interopRequireDefault(require("./button-group"));
-
 var _card = _interopRequireDefault(require("./card"));
-
-var _previewBox = _interopRequireDefault(require("./preview-box"));
-
 var _categoryAutocomplete = _interopRequireDefault(require("./category-autocomplete"));
-
-var _checkboxControl = _interopRequireDefault(require("./checkbox-control"));
-
 var _colorPicker = _interopRequireDefault(require("./color-picker"));
-
 var _customSelectControl = _interopRequireDefault(require("./custom-select-control"));
-
 var _formTokenField = _interopRequireDefault(require("./form-token-field"));
-
 var _footer = _interopRequireDefault(require("./footer"));
-
 var _handoff = _interopRequireDefault(require("./handoff"));
-
+var _handoffMessage = _interopRequireDefault(require("./handoff-message"));
 var _infoButton = _interopRequireDefault(require("./info-button"));
-
 var _imageUpload = _interopRequireDefault(require("./image-upload"));
-
 var _globalNotices = _interopRequireDefault(require("./global-notices"));
-
 var _grid = _interopRequireDefault(require("./grid"));
-
 var _modal = _interopRequireDefault(require("./modal"));
-
 var _newspackIcon = _interopRequireDefault(require("./newspack-icon"));
-
 var _newspackLogo = _interopRequireDefault(require("./newspack-logo"));
-
 var _notice = _interopRequireDefault(require("./notice"));
-
 var _patronsLogo = _interopRequireDefault(require("./patrons-logo"));
-
 var _pluginInstaller = _interopRequireDefault(require("./plugin-installer"));
-
 var _pluginSettings = _interopRequireDefault(require("./plugin-settings"));
-
 var _pluginToggle = _interopRequireDefault(require("./plugin-toggle"));
-
 var _popover = _interopRequireDefault(require("./popover"));
-
 var _progressBar = _interopRequireDefault(require("./progress-bar"));
-
 var _radioControl = _interopRequireDefault(require("./radio-control"));
-
 var _sectionHeader = _interopRequireDefault(require("./section-header"));
-
 var _selectControl = _interopRequireDefault(require("./select-control"));
-
 var _dateRangePicker = _interopRequireDefault(require("./date-range-picker"));
-
 var _settings = _interopRequireDefault(require("./settings"));
-
+var _stepsList = _interopRequireDefault(require("./steps-list"));
+var _stepsListItem = _interopRequireDefault(require("./steps-list-item"));
 var _styleCard = _interopRequireDefault(require("./style-card"));
-
 var _tabbedNavigation = _interopRequireDefault(require("./tabbed-navigation"));
-
 var _textControl = _interopRequireDefault(require("./text-control"));
-
-var _textareaControl = _interopRequireDefault(require("./textarea-control"));
-
-var _toggleControl = _interopRequireDefault(require("./toggle-control"));
-
-var _toggleGroup = _interopRequireDefault(require("./toggle-group"));
-
 var _waiting = _interopRequireDefault(require("./waiting"));
-
 var _webPreview = _interopRequireDefault(require("./web-preview"));
-
+var _wizard = _interopRequireDefault(require("./wizard"));
 var _withWizard = _interopRequireDefault(require("./with-wizard"));
-
 var _withWizardScreen = _interopRequireDefault(require("./with-wizard-screen"));
-
-var _wizardPagination = _interopRequireDefault(require("./wizard-pagination"));
-
 var _router = _interopRequireDefault(require("./proxied-imports/router"));
-
 var _hooks = _interopRequireDefault(require("./hooks"));
-
-var _utils = _interopRequireDefault(require("./utils"));
+var _utils = _interopRequireDefault(require("./utils"));
+require("./style.scss");

package/dist/cjs/info-button/index.js

@@ -1,24 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _element = require("@wordpress/element");
-
 var _components = require("@wordpress/components");
-
 var _icons = require("@wordpress/icons");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 require("./style.scss");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Info Button
  */
@@ -34,6 +26,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * Internal dependencies.
  */
+
 class InfoButton extends _element.Component {
   /**
    * Render.
@@ -43,7 +36,8 @@ class InfoButton extends _element.Component {
       className,
       ...otherProps
     } = this.props;
-    return (0, _jsxRuntime.jsx)(_components.Tooltip, { ...otherProps,
+    return (0, _jsxRuntime.jsx)(_components.Tooltip, {
+      ...otherProps,
       children: (0, _jsxRuntime.jsx)("span", {
         className: (0, _classnames.default)('newspack-info-button', className),
         children: (0, _jsxRuntime.jsx)(_icons.Icon, {
@@ -52,8 +46,6 @@ class InfoButton extends _element.Component {
       })
     });
   }
-
 }
-
 var _default = InfoButton;
 exports.default = _default;

package/dist/cjs/info-button/style.scss

@@ -2,8 +2,6 @@
  * Info Button
  */
 
-@import '~@wordpress/base-styles/colors';
-
 .newspack-info-button {
 	display: inline-block;
 	flex: 0 0 24px;
@@ -15,6 +13,6 @@
 
 	svg {
 		display: block;
-		fill: currentColor;
+		fill: currentcolor;
 	}
 }

package/dist/cjs/modal/index.js

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _element = require("@wordpress/element");
-
 var _components = require("@wordpress/components");
-
 require("./style.scss");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Modal
  */
@@ -32,6 +25,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * External dependencies.
  */
+
 class Modal extends _element.Component {
   /**
    * Render.
@@ -39,21 +33,16 @@ class Modal extends _element.Component {
   render() {
     const {
       className,
-      overlayClassName,
       isWide,
       isNarrow,
       ...otherProps
     } = this.props;
     const classes = (0, _classnames.default)('newspack-modal', isWide && 'newspack-modal--wide', isNarrow && 'newspack-modal--narrow', className);
-    const overlayClasses = (0, _classnames.default)('newspack-modal__overlay', overlayClassName);
     return (0, _jsxRuntime.jsx)(_components.Modal, {
       className: classes,
-      overlayClassName: overlayClasses,
       ...otherProps
     });
   }
-
 }
-
 var _default = Modal;
 exports.default = _default;