newspack-components 2.1.0 → 2.2.0

package/dist/cjs/hooks/usePrompt.js

@@ -1,16 +1,12 @@
 "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 _router = _interopRequireDefault(require("../proxied-imports/router"));
-
 // https://gist.github.com/sibelius/60a4e11da1f826b8d60dc3975a1ac805
 
 /**
@@ -20,45 +16,37 @@ var _router = _interopRequireDefault(require("../proxied-imports/router"));
 /**
  * Internal dependencies.
  */
+
 const {
   useHistory
 } = _router.default;
-
 var _default = (when, message) => {
   const history = useHistory();
   const self = (0, _element.useRef)(null);
-
   const onWindowOrTabClose = event => {
     if (!when) {
       return;
     }
-
     if (typeof event === 'undefined') {
       event = window.event;
     }
-
     if (event) {
       event.returnValue = message;
     }
-
     return message;
   };
-
   (0, _element.useEffect)(() => {
     if (when) {
       self.current = history.block(message);
       window.addEventListener('beforeunload', onWindowOrTabClose);
     }
-
     return () => {
       if (self.current) {
         self.current();
       }
-
       window.removeEventListener('beforeunload', onWindowOrTabClose);
     };
   }, [message, when]);
   return self.current;
 };
-
 exports.default = _default;

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,7 +98,8 @@ class ImageUpload extends _element.Component {
           })]
         }), (0, _jsxRuntime.jsx)("div", {
           className: classes,
-          style: { ...style
+          style: {
+            ...style
           },
           children: image?.url ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [(0, _jsxRuntime.jsx)("img", {
@@ -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;
@@ -18,7 +17,7 @@
 		background-repeat: no-repeat;
 		background-size: contain;
 		background-position: center;
-		border: 1px dashed $gray-700;
+		border: 1px dashed wp-colors.$gray-700;
 		border-radius: 2px;
 		display: flex;
 		justify-content: center;
@@ -52,12 +51,9 @@
 			&::after {
 				border: 1px solid rgba( black, 0.54 );
 				border-radius: 2px;
-				bottom: 0;
 				content: '';
-				left: 0;
+				inset: 0;
 				position: absolute;
-				right: 0;
-				top: 0;
 				z-index: 0;
 			}
 			button,
@@ -71,7 +67,7 @@
 			}
 			&::after {
 				background: rgba( white, 0.9 );
-				border-color: $gray-700;
+				border-color: wp-colors.$gray-700;
 			}
 			&:focus-within,
 			&:hover {
@@ -94,7 +90,7 @@
 		}
 	}
 	&__image + &__help {
-		color: $gray-700;
+		color: wp-colors.$gray-700;
 		font-size: 12px;
 		margin: 1em 0 0;
 	}

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 () {
@@ -95,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 () {
@@ -197,6 +208,18 @@ Object.defineProperty(exports, "Settings", {
     return _settings.default;
   }
 });
+Object.defineProperty(exports, "StepsList", {
+  enumerable: true,
+  get: function () {
+    return _stepsList.default;
+  }
+});
+Object.defineProperty(exports, "StepsListItem", {
+  enumerable: true,
+  get: function () {
+    return _stepsListItem.default;
+  }
+});
 Object.defineProperty(exports, "StyleCard", {
   enumerable: true,
   get: function () {
@@ -257,89 +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 _card = _interopRequireDefault(require("./card"));
-
 var _categoryAutocomplete = _interopRequireDefault(require("./category-autocomplete"));
-
 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 _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 _router = _interopRequireDefault(require("./proxied-imports/router"));
-
 var _hooks = _interopRequireDefault(require("./hooks"));
-
 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.
@@ -49,8 +43,6 @@ class Modal extends _element.Component {
       ...otherProps
     });
   }
-
 }
-
 var _default = Modal;
 exports.default = _default;

package/dist/cjs/modal/style.scss

@@ -2,16 +2,16 @@
  * Modal
  */
 
-@import '../../../shared/scss/colors';
+@use '../../../shared/scss/colors';
 
 .newspack-modal {
 	// Color
-	--wp-admin-theme-color: #{$primary-500};
-	--wp-admin-theme-color--rgb: #{$primary-500--rgb};
-	--wp-admin-theme-color-darker-10: #{$primary-600};
-	--wp-admin-theme-color-darker-10--rgb: #{$primary-600--rgb};
-	--wp-admin-theme-color-darker-20: #{$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{$primary-700--rgb};
+	--wp-admin-theme-color: #{colors.$primary-500};
+	--wp-admin-theme-color--rgb: #{colors.$primary-500--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-600};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
 
 	@media screen and ( min-width: 744px ) {
 		max-width: 680px;
@@ -50,7 +50,7 @@
 
 	.components-modal__content {
 		> *:last-child {
-			margin-bottom: 8px;
+			margin-bottom: 0;
 		}
 	}
 }

package/dist/cjs/newspack-icon/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");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 require("./style.scss");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Newspack Icon.
  */
@@ -32,6 +25,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * Internal dependencies.
  */
+
 class NewspackIcon extends _element.Component {
   /**
    * Render
@@ -57,9 +51,7 @@ class NewspackIcon extends _element.Component {
       })
     });
   }
-
 }
-
 NewspackIcon.defaultProps = {
   size: 32
 };

package/dist/cjs/newspack-icon/style.scss

@@ -2,21 +2,21 @@
  * Newspack Icon
  */
 
-@import '../../../shared/scss/colors';
+@use '../../../shared/scss/colors';
 
 .newspack-icon {
-	background: $primary-500;
+	background: colors.$primary-500;
 	fill: white;
 	padding: 12px;
 
 	&--white {
 		background: white;
-		fill: $primary-500;
+		fill: colors.$primary-500;
 	}
 
 	&--simple {
 		background: none;
-		fill: $primary-500;
+		fill: colors.$primary-500;
 		padding: 0;
 	}
 

package/dist/cjs/newspack-logo/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");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 require("./style.scss");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Newspack Logo.
  */
@@ -32,6 +25,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * Internal dependencies.
  */
+
 class NewspackLogo extends _element.Component {
   /**
    * Render
@@ -53,9 +47,7 @@ class NewspackLogo extends _element.Component {
       })
     });
   }
-
 }
-
 NewspackLogo.defaultProps = {
   height: 56
 };

package/dist/cjs/newspack-logo/style.scss

@@ -2,12 +2,12 @@
  * Newspack Logo
  */
 
-@import '../../../shared/scss/colors';
+@use '../../../shared/scss/colors';
 
 .newspack-logo {
 	&__svg {
 		display: block;
-		fill: currentColor;
+		fill: currentcolor;
 		margin: 0;
 		padding-bottom: 32px;
 		width: auto;
@@ -19,7 +19,7 @@
 	}
 
 	&__wrapper {
-		background: $primary-500;
+		background: colors.$primary-500;
 		color: white;
 		position: relative;