newspack-components 2.1.0 → 2.2.1

package/dist/cjs/category-autocomplete/index.js

@@ -1,32 +1,22 @@
 "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 _components = require("@wordpress/components");
-
 var _element = require("@wordpress/element");
-
 var _url = require("@wordpress/url");
-
 var _ = require("../");
-
 require("./style.scss");
-
-var _lodash = require("lodash");
-
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _find = _interopRequireDefault(require("lodash/find"));
+var _filter = _interopRequireDefault(require("lodash/filter"));
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Category Autocomplete
  */
@@ -45,8 +35,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 
 /**
  * Category autocomplete field component.
- */
-class CategoryAutocomplete extends _element.Component {
+ */class CategoryAutocomplete extends _element.Component {
   /**
    * Class constructor.
    */
@@ -57,15 +46,20 @@ class CategoryAutocomplete extends _element.Component {
       allCategories: {},
       isLoading: false
     });
+    /**
+     * Prepare categories data for the API endpoint, call the change handler.
+     *
+     * @param {Array} tokens An array of category tokens.
+     */
     (0, _defineProperty2.default)(this, "handleOnChange", tokens => {
       const {
         onChange
       } = this.props;
       const {
         suggestions
-      } = this.state; // Categories that are already will be objects, while new additions will be strings (the name).
+      } = this.state;
+      // Categories that are already will be objects, while new additions will be strings (the name).
       // allValues nomalizes the array so that they are all objects.
-
       const allValues = tokens.filter(token => 'undefined' !== typeof token) // Ensure each token is a valid value.
       .map(token => 'string' === typeof token ? suggestions[token] : token).filter(Boolean);
       onChange(allValues);
@@ -81,10 +75,9 @@ class CategoryAutocomplete extends _element.Component {
         if (item?.id) {
           acc.push(item.id);
         }
-
         return acc;
       }, []);
-      const availableSuggestions = (0, _lodash.filter)(suggestions, _ref => {
+      const availableSuggestions = (0, _filter.default)(suggestions, _ref => {
         let {
           id
         } = _ref;
@@ -92,9 +85,8 @@ class CategoryAutocomplete extends _element.Component {
       });
       return availableSuggestions.map(v => v.name);
     });
-    this.debouncedUpdateSuggestions = (0, _lodash.debounce)(this.updateSuggestions, 100);
+    this.debouncedUpdateSuggestions = (0, _debounce.default)(this.updateSuggestions, 100);
   }
-
   componentDidMount() {
     this.setState({
       isLoading: true
@@ -110,21 +102,19 @@ class CategoryAutocomplete extends _element.Component {
       isLoading: false
     }));
   }
+
   /**
    * Clean up debounced suggestions method.
    */
-
-
   componentWillUnmount() {
     this.debouncedUpdateSuggestions.cancel();
   }
+
   /**
    * Refresh the autocomplete UI based on text that was typed.
    *
    * @param {string} search The typed text to search for.
    */
-
-
   updateSuggestions(search) {
     this.setState({
       isLoading: true
@@ -139,7 +129,8 @@ class CategoryAutocomplete extends _element.Component {
       })
     }).then(categories => {
       this.setState({
-        suggestions: categories.reduce((accumulator, category) => ({ ...accumulator,
+        suggestions: categories.reduce((accumulator, category) => ({
+          ...accumulator,
           [category.name]: category
         }), {})
       });
@@ -147,13 +138,6 @@ class CategoryAutocomplete extends _element.Component {
       isLoading: false
     }));
   }
-  /**
-   * Prepare categories data for the API endpoint, call the change handler.
-   *
-   * @param {Array} tokens An array of category tokens.
-   */
-
-
   /**
    * Render the component.
    */
@@ -177,15 +161,13 @@ class CategoryAutocomplete extends _element.Component {
       children: [(0, _jsxRuntime.jsx)(_.FormTokenField, {
         onInputChange: input => this.debouncedUpdateSuggestions(input),
         value: value.reduce((acc, item) => {
-          const categoryOrItem = typeof item === 'number' ? (0, _lodash.find)(allCategories, ['id', item]) : item;
-
+          const categoryOrItem = typeof item === 'number' ? (0, _find.default)(allCategories, ['id', item]) : item;
           if (categoryOrItem) {
             acc.push({
               id: categoryOrItem.term_id || categoryOrItem.id,
               value: categoryOrItem.value || categoryOrItem.name
             });
           }
-
           return acc;
         }, []),
         suggestions: this.getAvailableSuggestions(),
@@ -201,9 +183,7 @@ class CategoryAutocomplete extends _element.Component {
       }) : null]
     });
   }
-
 }
-
 CategoryAutocomplete.defaultProps = {
   taxonomy: 'categories'
 };

package/dist/cjs/category-autocomplete/style.scss

@@ -2,8 +2,6 @@
  * Category Autocomplete
  */
 
-@import '../../../shared/scss/colors';
-
 .newspack-category-autocomplete {
 	position: relative;
 

package/dist/cjs/color-picker/index.js

@@ -1,30 +1,19 @@
 "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");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _colord = require("colord");
-
 var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
-
 var _hooks = _interopRequireDefault(require("../hooks"));
-
 var _utils = _interopRequireDefault(require("../utils"));
-
 require("./style.scss");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * WordPress dependencies.
  */
@@ -36,11 +25,11 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * Internal dependencies.
  */
+
 (0, _colord.extend)([_a11y.default]);
 const {
   InteractiveDiv
 } = _utils.default;
-
 const ColorPicker = _ref => {
   let {
     label,
@@ -51,9 +40,7 @@ const ColorPicker = _ref => {
   const [isExpanded, setIsExpanded] = (0, _element.useState)(false);
   const ref = (0, _element.useRef)();
   const colordColor = (0, _colord.colord)(color);
-
   _hooks.default.useOnClickOutside(ref, () => setIsExpanded(false));
-
   return (0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)('newspack-color-picker', className),
     children: [(0, _jsxRuntime.jsx)("div", {
@@ -78,6 +65,5 @@ const ColorPicker = _ref => {
     })]
   });
 };
-
 var _default = ColorPicker;
 exports.default = _default;

package/dist/cjs/color-picker/style.scss

@@ -2,9 +2,6 @@
  * Color Picker
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
 .newspack-color-picker {
 	position: relative;
 

package/dist/cjs/consts.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NEWSPACK_SUPPORT_URL = exports.NEWSPACK_SITE_URL = void 0;
-const NEWSPACK_SITE_URL = 'https://newspack.pub';
+exports.NEWSPACK_SUPPORT_URL = exports.NEWSPACK_SITE_URL = exports.HANDOFF_KEY = void 0;
+const NEWSPACK_SITE_URL = 'https://newspack.com';
 exports.NEWSPACK_SITE_URL = NEWSPACK_SITE_URL;
 const NEWSPACK_SUPPORT_URL = `${NEWSPACK_SITE_URL}/support`;
-exports.NEWSPACK_SUPPORT_URL = NEWSPACK_SUPPORT_URL;
+exports.NEWSPACK_SUPPORT_URL = NEWSPACK_SUPPORT_URL;
+const HANDOFF_KEY = 'newspack_wizard_handoff_message';
+exports.HANDOFF_KEY = HANDOFF_KEY;

package/dist/cjs/custom-select-control/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");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 require("./style.scss");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Custom Select Control
  */
@@ -32,6 +25,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * Internal dependencies
  */
+
 class CustomSelectControl extends _element.Component {
   /**
    * Render.
@@ -47,8 +41,6 @@ class CustomSelectControl extends _element.Component {
       ...otherProps
     });
   }
-
 }
-
 var _default = CustomSelectControl;
 exports.default = _default;

package/dist/cjs/custom-select-control/style.scss

@@ -2,8 +2,7 @@
  * Custom Select Control
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-custom-select-control {
 	label {
@@ -12,9 +11,9 @@
 	}
 
 	.components-custom-select-control__button {
-		border-color: $gray-700;
+		border-color: wp-colors.$gray-700;
 		border-radius: 2px;
-		color: $gray-900;
+		color: wp-colors.$gray-900;
 		font-size: inherit;
 		min-height: 30px;
 		min-width: 100%;
@@ -24,7 +23,7 @@
 		&:focus,
 		&:hover,
 		&[aria-expanded='true'] {
-			color: $gray-900;
+			color: wp-colors.$gray-900;
 		}
 
 		&:focus {
@@ -43,7 +42,7 @@
 	}
 
 	.components-custom-select-control__menu {
-		border-color: $gray-700;
+		border-color: wp-colors.$gray-700;
 		border-radius: 2px;
 		box-shadow: 0 4px 8px rgba( black, 0.08 );
 		margin: 8px 0 0;
@@ -64,7 +63,7 @@
 		}
 
 		&.is-header {
-			background: $gray-100;
+			background: wp-colors.$gray-100;
 			cursor: default;
 			font-weight: bold;
 			margin-left: 0;

package/dist/cjs/date-range-picker/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 _reactDaterangePicker = _interopRequireDefault(require("react-daterange-picker"));
-
 var _moment = _interopRequireDefault(require("moment"));
-
 var _momentRange = require("moment-range");
-
 require("react-daterange-picker/dist/css/react-calendar.css");
-
 require("./style.scss");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * External dependencies.
  */
@@ -26,8 +18,8 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * Internal dependencies.
  */
-const moment = (0, _momentRange.extendMoment)(_moment.default);
 
+const moment = (0, _momentRange.extendMoment)(_moment.default);
 const DateRangePicker = _ref => {
   let {
     start,
@@ -45,6 +37,5 @@ const DateRangePicker = _ref => {
     }
   });
 };
-
 var _default = DateRangePicker;
 exports.default = _default;

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;