newspack-components 2.1.0 → 2.2.0

package/dist/cjs/date-range-picker/style.scss

@@ -1,5 +1,5 @@
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .DateRangePicker {
 	margin: 32px 0;
@@ -47,7 +47,7 @@
 	}
 
 	&__MonthHeader {
-		color: $gray-900;
+		color: wp-colors.$gray-900;
 		font-size: 17px;
 		height: auto;
 		line-height: 24px;
@@ -62,8 +62,8 @@
 	}
 
 	&__WeekdayHeading {
-		border-bottom-color: $gray-300;
-		color: $gray-900;
+		border-bottom-color: wp-colors.$gray-300;
+		color: wp-colors.$gray-900;
 
 		abbr[title] {
 			color: inherit;
@@ -76,20 +76,20 @@
 	}
 
 	&__Date {
-		border-color: $gray-300;
+		border-color: wp-colors.$gray-300;
 		border-bottom-width: 1px;
 
 		&--weekend {
-			background-color: $gray-100;
+			background-color: wp-colors.$gray-100;
 		}
 
 		&--otherMonth {
-			color: $gray-200;
+			color: wp-colors.$gray-200;
 			opacity: 1;
 		}
 
 		&--is-disabled {
-			color: $gray-100;
+			color: wp-colors.$gray-100;
 			cursor: not-allowed;
 		}
 
@@ -100,7 +100,7 @@
 
 	&__CalendarSelection,
 	&__CalendarHighlight {
-		border-color: $primary-500;
+		border-color: colors.$primary-500;
 		bottom: 4px;
 		top: 4px;
 
@@ -129,11 +129,11 @@
 	}
 
 	&__CalendarSelection {
-		background-color: $primary-500;
+		background-color: colors.$primary-500;
 	}
 
 	&__CalendarHighlight {
-		background: $primary-500;
+		background: colors.$primary-500;
 		border: none;
 		bottom: 0;
 		top: 0;

package/dist/cjs/footer/index.js

@@ -4,26 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _i18n = require("@wordpress/i18n");
-
 var _components = require("@wordpress/components");
-
 var _ = require("../");
-
 require("./style.scss");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Footer
  */
-
 /**
  * WordPress dependencies.
  */
 const __ = _i18n.__;
-
+/**
+ * Internal dependencies.
+ */
 const Footer = _ref => {
   let {
     simple
@@ -41,53 +36,47 @@ const Footer = _ref => {
   } = window.newspack_urls || {};
   const footerElements = [{
     label: pluginVersion.label,
-    url: 'https://newspack.pub/category/release-notes/',
+    url: 'https://newspack.com/category/release-notes/',
     external: true
   }, {
     label: __('About', 'newspack'),
-    url: 'https://newspack.pub/',
+    url: 'https://newspack.com/',
     external: true
   }, {
     label: __('Documentation', 'newspack'),
     url: support,
     external: true
   }];
-
   if (componentsDemo) {
     footerElements.push({
       label: __('Components Demo', 'newspack'),
       url: componentsDemo
     });
   }
-
   if (setupWizard) {
     footerElements.push({
       label: __('Setup Wizard', 'newspack'),
       url: setupWizard
     });
   }
-
   if (resetUrl) {
     footerElements.push({
       label: __('Reset Newspack', 'newspack'),
       url: resetUrl
     });
   }
-
   if (removeStarterContent) {
     footerElements.push({
       label: __('Remove Starter Content', 'newspack'),
       url: removeStarterContent
     });
   }
-
   if (supportEmail) {
     footerElements.push({
       label: __('Contact Support', 'newspack'),
       url: `mailto:${supportEmail}`
     });
   }
-
   return (0, _jsxRuntime.jsxs)("div", {
     className: "newspack-footer",
     children: [!simple && (0, _jsxRuntime.jsx)("div", {
@@ -116,6 +105,5 @@ const Footer = _ref => {
     })]
   });
 };
-
 var _default = Footer;
 exports.default = _default;

package/dist/cjs/footer/style.scss

@@ -2,15 +2,15 @@
  * Footer
  */
 
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-footer {
 	align-items: stretch;
 	background: white;
-	border: 0 solid $gray-300;
+	border: 0 solid wp-colors.$gray-300;
 	border-width: 1px 0;
 	bottom: 0;
-	color: $gray-700;
+	color: wp-colors.$gray-700;
 	display: flex;
 	flex-wrap: wrap;
 	font-size: 12px;
@@ -53,14 +53,14 @@
 			&:active,
 			&:focus,
 			&:hover {
-				color: $gray-900;
+				color: wp-colors.$gray-900;
 			}
 		}
 	}
 
 	&__logo {
 		align-items: center;
-		background: $gray-900;
+		background: wp-colors.$gray-900;
 		display: flex;
 		margin: 0 0 -1px;
 		padding: 16px;

package/dist/cjs/form-token-field/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 _components = require("@wordpress/components");
-
 var _element = require("@wordpress/element");
-
 require("./style.scss");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Form Token Field
  */
@@ -32,6 +25,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * External dependencies.
  */
+
 class FormTokenField extends _element.Component {
   /**
    * Render.
@@ -59,8 +53,6 @@ class FormTokenField extends _element.Component {
       })]
     });
   }
-
 }
-
 var _default = FormTokenField;
 exports.default = _default;

package/dist/cjs/form-token-field/style.scss

@@ -2,8 +2,7 @@
  * Form Token Field
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-form-token-field {
 	width: 100%;
@@ -16,7 +15,7 @@
 	// Help
 
 	&__help {
-		color: $gray-700;
+		color: wp-colors.$gray-700;
 		font-size: 12px;
 		margin: 8px 0 0 !important;
 	}

package/dist/cjs/global-notices/index.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _qs = require("qs");
-
 var _ = require("../");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * External dependencies
  */
@@ -18,13 +14,12 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * Internal dependencies
  */
+
 const GlobalNotices = () => {
   const notice = (0, _qs.parse)(window.location.search)['newspack-notice'];
-
   if (!notice) {
     return null;
   }
-
   return notice.split(',').map((text, i) => {
     if (text.indexOf('_error_') === 0) {
       return (0, _jsxRuntime.jsx)(_.Notice, {
@@ -33,13 +28,11 @@ const GlobalNotices = () => {
         rawHTML: true
       }, i);
     }
-
     return (0, _jsxRuntime.jsx)(_.Notice, {
       isSuccess: true,
       noticeText: text
     }, i);
   });
 };
-
 var _default = GlobalNotices;
 exports.default = _default;

package/dist/cjs/grid/index.js

@@ -1,20 +1,14 @@
 "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");
-
 require("./style.scss");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Grid
  */
@@ -30,6 +24,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * External dependencies
  */
+
 class Grid extends _element.Component {
   /**
    * Render
@@ -49,9 +44,7 @@ class Grid extends _element.Component {
       ...otherProps
     });
   }
-
 }
-
 Grid.defaultProps = {
   columns: 2,
   gutter: 32,

package/dist/cjs/grid/style.scss

@@ -2,7 +2,7 @@
  * Grid
  */
 
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-grid {
 	display: grid;
@@ -145,9 +145,9 @@
 	// Table-like
 	&__thead {
 		background: rgba( black, 0.025 );
-		border-bottom: 1px solid $gray-300;
-		border-top: 1px solid $gray-300;
-		color: $gray-900;
+		border-bottom: 1px solid wp-colors.$gray-300;
+		border-top: 1px solid wp-colors.$gray-300;
+		color: wp-colors.$gray-900;
 
 		> *:not( .screen-reader-text ) {
 			padding: 8px;
@@ -155,7 +155,7 @@
 	}
 
 	&__tbody {
-		border-bottom: 1px solid $gray-300;
+		border-bottom: 1px solid wp-colors.$gray-300;
 		padding: 8px 0;
 	}
 

package/dist/cjs/handoff/index.js

@@ -1,37 +1,31 @@
 "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 _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
-
 var _element = require("@wordpress/element");
-
 var _i18n = require("@wordpress/i18n");
-
 var _ = require("../");
-
-var _lodash = require("lodash");
-
+var _assign = _interopRequireDefault(require("lodash/assign"));
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Handoff
  */
-
 /**
  * WordPress dependencies.
  */
+/**
+ * Internal dependencies.
+ */
 const __ = _i18n.__;
-
+/**
+ * External dependencies.
+ */
 class Handoff extends _element.Component {
   constructor() {
     super(...arguments);
@@ -68,7 +62,7 @@ class Handoff extends _element.Component {
         primaryModalButton: __('Manage', 'newspack'),
         dismissModalButton: __('Dismiss', 'newspack')
       };
-      return (0, _lodash.assign)(defaults, this.props);
+      return (0, _assign.default)(defaults, this.props);
     });
     (0, _defineProperty2.default)(this, "goToPlugin", plugin => {
       const {
@@ -92,7 +86,6 @@ class Handoff extends _element.Component {
       showModal: false
     };
   }
-
   /**
    * Render.
    */
@@ -180,9 +173,7 @@ class Handoff extends _element.Component {
       })]
     });
   }
-
 }
-
 Handoff.defaultProps = {
   onReady: () => {}
 };

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = HandoffMessage;
+var _element = require("@wordpress/element");
+var _consts = require("../consts");
+var _ = require("../");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+/**
+ * Handoff Message Component.
+ */function HandoffMessage() {
+  const [handoffMessage, setHandoffMessage] = (0, _element.useState)(false);
+  (0, _element.useEffect)(() => {
+    // Slight delay to allow for localStorage to be updated by RAS component.
+    setTimeout(() => {
+      const handoff = JSON.parse(localStorage.getItem(_consts.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(_consts.HANDOFF_KEY);
+        setHandoffMessage(false);
+      }
+    }, 100);
+
+    // Clean up the notification when unmounting.
+    return () => window.localStorage.removeItem(_consts.HANDOFF_KEY);
+  }, []);
+  if (!handoffMessage) return null;
+  return (0, _jsxRuntime.jsx)(_.Notice, {
+    isHandoff: true,
+    isDismissible: false,
+    rawHTML: true,
+    noticeText: handoffMessage
+  });
+}

package/dist/cjs/hooks/index.js

@@ -1,28 +1,22 @@
 "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 _usePrompt = _interopRequireDefault(require("./usePrompt"));
-
 var _useObjectState = _interopRequireDefault(require("./useObjectState"));
-
 var _useOnClickOutside = _interopRequireDefault(require("./useOnClickOutside"));
-
 /**
  * WordPress dependencies
  */
+
 const useUniqueId = prefix => {
   const id = (0, _element.useRef)(`${prefix}-${Math.round(Math.random() * 99999)}`);
   return id.current;
 };
-
 var _default = {
   usePrompt: _usePrompt.default,
   useObjectState: _useObjectState.default,

package/dist/cjs/hooks/useObjectState.js

@@ -1,46 +1,40 @@
 "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 _lodash = require("lodash");
-
+var _isArray = _interopRequireDefault(require("lodash/isArray"));
+var _mergeWith = _interopRequireDefault(require("lodash/mergeWith"));
 /**
  * WordPress dependencies
  */
+
 const mergeCustomizer = (objValue, srcValue) => {
-  if ((0, _lodash.isArray)(objValue)) {
+  if ((0, _isArray.default)(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.
  */
-
-
 var _default = function _default() {
   let initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const [stateObject, setStateObject] = (0, _element.useState)(initial);
-
-  const runUpdate = update => setStateObject(_stateObject => (0, _lodash.mergeWith)({}, _stateObject, update, mergeCustomizer));
-
+  const runUpdate = update => setStateObject(_stateObject => (0, _mergeWith.default)({}, _stateObject, update, mergeCustomizer));
   const updateStateObject = keyOrUpdate => {
     if (typeof keyOrUpdate === 'string') {
       return value => runUpdate({
         [keyOrUpdate]: value
       });
     }
-
     runUpdate(keyOrUpdate);
   };
-
   return [stateObject, updateStateObject];
 };
-
 exports.default = _default;

package/dist/cjs/hooks/useObjectState.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 _useObjectState = _interopRequireDefault(require("./useObjectState"));
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 const INIT_STATE = {
   name: 'Foo',
   widgets: [1],
@@ -18,7 +13,6 @@ const INIT_STATE = {
     baz: 1
   }
 };
-
 const TestComponent = () => {
   const [state, updateState] = (0, _useObjectState.default)(INIT_STATE);
   return (0, _jsxRuntime.jsxs)("div", {
@@ -53,24 +47,18 @@ const TestComponent = () => {
     })]
   });
 };
-
 describe('useObjectState', () => {
   const getState = () => JSON.parse(_react2.screen.getByPlaceholderText('state').getAttribute('value'));
-
   beforeEach(() => {
     (0, _react2.render)((0, _jsxRuntime.jsx)(TestComponent, {}));
   });
   it('updates arrays', () => {
     expect(getState()).toStrictEqual(INIT_STATE);
-
     _react2.screen.getByText('Remove widgets').click();
-
     expect(getState()).toMatchObject({
       widgets: []
     });
-
     _react2.screen.getByText('Add widget').click();
-
     expect(getState()).toMatchObject({
       widgets: [1]
     });
@@ -81,14 +69,12 @@ describe('useObjectState', () => {
         value: 'Ramon'
       }
     });
-
     expect(getState()).toMatchObject({
       name: 'Ramon'
     });
   });
   it('updates a nested object', () => {
     _react2.screen.getByText('Nested update').click();
-
     expect(getState()).toMatchObject({
       attributes: {
         bar: 2,

package/dist/cjs/hooks/useOnClickOutside.js

@@ -4,14 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _element = require("@wordpress/element");
-
 // https://usehooks.com/useOnClickOutside/
 
 /**
  * External dependencies.
  */
+
 const useOnClickOutside = (ref, handler) => {
   (0, _element.useEffect)(() => {
     const listener = event => {
@@ -19,17 +18,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 ...
@@ -37,6 +35,5 @@ const useOnClickOutside = (ref, handler) => {
   // ... passing it into this hook.
   [ref, handler]);
 };
-
 var _default = useOnClickOutside;
 exports.default = _default;