newspack-components 2.1.0 → 2.2.1

package/dist/esm/handoff/index.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /**
  * Handoff
  */
@@ -10,25 +9,23 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import apiFetch from '@wordpress/api-fetch';
 import { Component, Fragment } from '@wordpress/element';
 import { __ as alias__ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies.
  */
-
 const __ = alias__;
 import { Button, Card, Modal, Waiting } from '../';
+
 /**
  * External dependencies.
  */
-
-import { assign } from 'lodash';
+import assign from 'lodash/assign';
 import classnames from 'classnames';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 class Handoff extends Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "componentDidMount", () => {
       this._isMounted = true;
       const {
@@ -36,11 +33,9 @@ class Handoff extends Component {
       } = this.props;
       this.retrievePluginInfo(plugin);
     });
-
     _defineProperty(this, "componentWillUnmount", () => {
       this._isMounted = false;
     });
-
     _defineProperty(this, "retrievePluginInfo", plugin => {
       const {
         onReady
@@ -56,7 +51,6 @@ class Handoff extends Component {
         }
       });
     });
-
     _defineProperty(this, "textForPlugin", pluginInfo => {
       const defaults = {
         modalBody: null,
@@ -67,7 +61,6 @@ class Handoff extends Component {
       };
       return assign(defaults, this.props);
     });
-
     _defineProperty(this, "goToPlugin", plugin => {
       const {
         editLink,
@@ -85,13 +78,11 @@ class Handoff extends Component {
         window.location.href = response.HandoffLink;
       });
     });
-
     this.state = {
       pluginInfo: [],
       showModal: false
     };
   }
-
   /**
    * Render.
    */
@@ -179,9 +170,7 @@ class Handoff extends Component {
       })]
     });
   }
-
 }
-
 Handoff.defaultProps = {
   onReady: () => {}
 };

package/dist/esm/handoff-message/index.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies.
+ */
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import { HANDOFF_KEY } from '../consts';
+import { Notice } from '../';
+
+/**
+ * Handoff Message Component.
+ */
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export default function HandoffMessage() {
+  const [handoffMessage, setHandoffMessage] = useState(false);
+  useEffect(() => {
+    // Slight delay to allow for localStorage to be updated by RAS component.
+    setTimeout(() => {
+      const handoff = JSON.parse(localStorage.getItem(HANDOFF_KEY));
+      if (handoff?.message) {
+        setHandoffMessage(handoff.message);
+      } else {
+        setHandoffMessage(false);
+      }
+
+      // Clean up the notification if navigating away from the relevant page.
+      if (handoff?.url && -1 === window.location.href.indexOf(handoff.url)) {
+        window.localStorage.removeItem(HANDOFF_KEY);
+        setHandoffMessage(false);
+      }
+    }, 100);
+
+    // Clean up the notification when unmounting.
+    return () => window.localStorage.removeItem(HANDOFF_KEY);
+  }, []);
+  if (!handoffMessage) return null;
+  return _jsx(Notice, {
+    isHandoff: true,
+    isDismissible: false,
+    rawHTML: true,
+    noticeText: handoffMessage
+  });
+}

package/dist/esm/hooks/index.js

@@ -5,12 +5,10 @@ import { useRef } from '@wordpress/element';
 import usePrompt from './usePrompt';
 import useObjectState from './useObjectState';
 import useOnClickOutside from './useOnClickOutside';
-
 const useUniqueId = prefix => {
   const id = useRef(`${prefix}-${Math.round(Math.random() * 99999)}`);
   return id.current;
 };
-
 export default {
   usePrompt,
   useObjectState,

package/dist/esm/hooks/useObjectState.js

@@ -2,35 +2,30 @@
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { mergeWith, isArray } from 'lodash';
-
+import isArray from 'lodash/isArray';
+import mergeWith from 'lodash/mergeWith';
 const mergeCustomizer = (objValue, srcValue) => {
   if (isArray(objValue)) {
     // If it's an array, replace it (instead of concatenating).
     return srcValue;
   }
 };
+
 /**
  * A useState for an object.
  * Nested objects will be nested, but arrays replaced.
  */
-
-
 export default (function () {
   let initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const [stateObject, setStateObject] = useState(initial);
-
   const runUpdate = update => setStateObject(_stateObject => mergeWith({}, _stateObject, update, mergeCustomizer));
-
   const updateStateObject = keyOrUpdate => {
     if (typeof keyOrUpdate === 'string') {
       return value => runUpdate({
         [keyOrUpdate]: value
       });
     }
-
     runUpdate(keyOrUpdate);
   };
-
   return [stateObject, updateStateObject];
 });

package/dist/esm/hooks/useObjectState.test.js

@@ -11,7 +11,6 @@ const INIT_STATE = {
     baz: 1
   }
 };
-
 const TestComponent = () => {
   const [state, updateState] = useObjectState(INIT_STATE);
   return _jsxs("div", {
@@ -46,10 +45,8 @@ const TestComponent = () => {
     })]
   });
 };
-
 describe('useObjectState', () => {
   const getState = () => JSON.parse(screen.getByPlaceholderText('state').getAttribute('value'));
-
   beforeEach(() => {
     render(_jsx(TestComponent, {}));
   });

package/dist/esm/hooks/useOnClickOutside.js

@@ -4,7 +4,6 @@
  * External dependencies.
  */
 import { useEffect } from '@wordpress/element';
-
 const useOnClickOutside = (ref, handler) => {
   useEffect(() => {
     const listener = event => {
@@ -12,17 +11,16 @@ const useOnClickOutside = (ref, handler) => {
       if (!ref.current || ref.current.contains(event.target)) {
         return;
       }
-
       handler(event);
     };
-
     document.addEventListener('mousedown', listener);
     document.addEventListener('touchstart', listener);
     return () => {
       document.removeEventListener('mousedown', listener);
       document.removeEventListener('touchstart', listener);
     };
-  }, // Add ref and handler to effect dependencies
+  },
+  // Add ref and handler to effect dependencies
   // It's worth noting that because passed in handler is a new ...
   // ... function on every render that will cause this effect ...
   // ... callback/cleanup to run every render. It's not a big deal ...
@@ -30,5 +28,4 @@ const useOnClickOutside = (ref, handler) => {
   // ... passing it into this hook.
   [ref, handler]);
 };
-
 export default useOnClickOutside;

package/dist/esm/hooks/usePrompt.js

@@ -4,10 +4,10 @@
  * External dependencies.
  */
 import { useEffect, useRef } from '@wordpress/element';
+
 /**
  * Internal dependencies.
  */
-
 import Router from '../proxied-imports/router';
 const {
   useHistory
@@ -15,34 +15,27 @@ const {
 export default ((when, message) => {
   const history = useHistory();
   const self = useRef(null);
-
   const onWindowOrTabClose = event => {
     if (!when) {
       return;
     }
-
     if (typeof event === 'undefined') {
       event = window.event;
     }
-
     if (event) {
       event.returnValue = message;
     }
-
     return message;
   };
-
   useEffect(() => {
     if (when) {
       self.current = history.block(message);
       window.addEventListener('beforeunload', onWindowOrTabClose);
     }
-
     return () => {
       if (self.current) {
         self.current();
       }
-
       window.removeEventListener('beforeunload', onWindowOrTabClose);
     };
   }, [message, when]);

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

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /**
  * Image Upload
  */
@@ -9,35 +8,35 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 import { Component } from '@wordpress/element';
 import { __ as alias__ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies.
  */
-
 const __ = alias__;
 import { Button, InfoButton } from '../';
 import './style.scss';
+
 /**
  * External dependencies.
  */
-
 import classnames from 'classnames';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-
 class ImageUpload extends Component {
   /**
    * Constructor.
    */
   constructor() {
     super(...arguments);
-
+    /**
+     * Open the WP media modal.
+     */
     _defineProperty(this, "openModal", () => {
       if (this.state.frame) {
         this.state.frame.open();
         return;
       }
-
       this.setState({
         frame: wp.media({
           title: __('Select or upload image'),
@@ -54,7 +53,9 @@ class ImageUpload extends Component {
         this.state.frame.open();
       });
     });
-
+    /**
+     * Update the state when an image is selected from the media modal.
+     */
     _defineProperty(this, "handleImageSelect", () => {
       const {
         onChange
@@ -62,11 +63,14 @@ class ImageUpload extends Component {
       const attachment = this.state.frame.state().get('selection').first().toJSON();
       onChange(attachment);
     });
-
+    /**
+     * Render.
+     */
     _defineProperty(this, "render", () => {
       const {
         buttonLabel,
         className,
+        disabled,
         help,
         image,
         info,
@@ -92,7 +96,8 @@ class ImageUpload extends Component {
           })]
         }), _jsx("div", {
           className: classes,
-          style: { ...style
+          style: {
+            ...style
           },
           children: image?.url ? _jsxs(_Fragment, {
             children: [_jsx("img", {
@@ -102,12 +107,14 @@ class ImageUpload extends Component {
             }), _jsxs("div", {
               className: "newspack-image-upload__controls",
               children: [_jsx(Button, {
+                disabled: disabled,
                 onClick: this.openModal,
                 isLink: true,
                 children: __('Replace', 'newspack')
               }), _jsx("span", {
                 className: "sep"
               }), _jsx(Button, {
+                disabled: disabled,
                 onClick: () => onChange(null),
                 isLink: true,
                 isDestructive: true,
@@ -115,6 +122,7 @@ class ImageUpload extends Component {
               })]
             })]
           }) : _jsx(Button, {
+            disabled: disabled,
             onClick: this.openModal,
             isLink: true,
             children: buttonLabel ? buttonLabel : __('Upload', 'newspack')
@@ -125,16 +133,9 @@ class ImageUpload extends Component {
         })]
       });
     });
-
     this.state = {
       frame: false
     };
   }
-  /**
-   * Open the WP media modal.
-   */
-
-
 }
-
 export default ImageUpload;

package/dist/esm/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/esm/index.js

@@ -1,3 +1,4 @@
+export { default as Accordion } from './accordion';
 export { default as ActionCard } from './action-card';
 export { default as AutocompleteTokenField } from './autocomplete-tokenfield';
 export { default as AutocompleteWithSuggestions } from './autocomplete-with-suggestions';
@@ -10,6 +11,7 @@ export { default as CustomSelectControl } from './custom-select-control';
 export { default as FormTokenField } from './form-token-field';
 export { default as Footer } from './footer';
 export { default as Handoff } from './handoff';
+export { default as HandoffMessage } from './handoff-message';
 export { default as InfoButton } from './info-button';
 export { default as ImageUpload } from './image-upload';
 export { default as GlobalNotices } from './global-notices';
@@ -29,6 +31,8 @@ export { default as SectionHeader } from './section-header';
 export { default as SelectControl } from './select-control';
 export { default as DateRangePicker } from './date-range-picker';
 export { default as Settings } from './settings';
+export { default as StepsList } from './steps-list';
+export { default as StepsListItem } from './steps-list-item';
 export { default as StyleCard } from './style-card';
 export { default as TabbedNavigation } from './tabbed-navigation';
 export { default as TextControl } from './text-control';

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

@@ -8,18 +8,17 @@
 import { Component } from '@wordpress/element';
 import { Tooltip } from '@wordpress/components';
 import { Icon, info } from '@wordpress/icons';
+
 /**
  * External dependencies.
  */
-
 import classnames from 'classnames';
+
 /**
  * Internal dependencies.
  */
-
 import './style.scss';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 class InfoButton extends Component {
   /**
    * Render.
@@ -29,7 +28,8 @@ class InfoButton extends Component {
       className,
       ...otherProps
     } = this.props;
-    return _jsx(Tooltip, { ...otherProps,
+    return _jsx(Tooltip, {
+      ...otherProps,
       children: _jsx("span", {
         className: classnames('newspack-info-button', className),
         children: _jsx(Icon, {
@@ -38,7 +38,5 @@ class InfoButton extends Component {
       })
     });
   }
-
 }
-
 export default InfoButton;

package/dist/esm/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/esm/modal/index.js

@@ -7,18 +7,17 @@
  */
 import { Component } from '@wordpress/element';
 import { Modal as BaseComponent } from '@wordpress/components';
+
 /**
  * Internal dependencies.
  */
-
 import './style.scss';
+
 /**
  * External dependencies.
  */
-
 import classnames from 'classnames';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 class Modal extends Component {
   /**
    * Render.
@@ -36,7 +35,5 @@ class Modal extends Component {
       ...otherProps
     });
   }
-
 }
-
 export default Modal;

package/dist/esm/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/esm/newspack-icon/index.js

@@ -7,18 +7,17 @@
  */
 import { Component } from '@wordpress/element';
 import { Path, SVG } from '@wordpress/components';
+
 /**
  * External dependencies.
  */
-
 import classnames from 'classnames';
+
 /**
  * Internal dependencies.
  */
-
 import './style.scss';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 class NewspackIcon extends Component {
   /**
    * Render
@@ -44,9 +43,7 @@ class NewspackIcon extends Component {
       })
     });
   }
-
 }
-
 NewspackIcon.defaultProps = {
   size: 32
 };

package/dist/esm/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/esm/newspack-logo/index.js

@@ -7,18 +7,17 @@
  */
 import { Component } from '@wordpress/element';
 import { Path, SVG } from '@wordpress/components';
+
 /**
  * External dependencies.
  */
-
 import classnames from 'classnames';
+
 /**
  * Internal dependencies.
  */
-
 import './style.scss';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 class NewspackLogo extends Component {
   /**
    * Render
@@ -40,9 +39,7 @@ class NewspackLogo extends Component {
       })
     });
   }
-
 }
-
 NewspackLogo.defaultProps = {
   height: 56
 };