newspack-components 2.0.3 → 2.1.0

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

@@ -11,6 +11,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
 
+var _components = require("@wordpress/components");
+
 var _element = require("@wordpress/element");
 
 var _url = require("@wordpress/url");
@@ -52,7 +54,8 @@ class CategoryAutocomplete extends _element.Component {
     super(props);
     (0, _defineProperty2.default)(this, "state", {
       suggestions: {},
-      allCategories: {}
+      allCategories: {},
+      isLoading: false
     });
     (0, _defineProperty2.default)(this, "handleOnChange", tokens => {
       const {
@@ -63,13 +66,39 @@ class CategoryAutocomplete extends _element.Component {
       } = 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.map(token => typeof token === 'string' ? suggestions[token] : token);
+      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);
     });
+    (0, _defineProperty2.default)(this, "getAvailableSuggestions", () => {
+      const {
+        value
+      } = this.props;
+      const {
+        suggestions
+      } = this.state;
+      const selectedIds = value.reduce((acc, item) => {
+        if (item?.id) {
+          acc.push(item.id);
+        }
+
+        return acc;
+      }, []);
+      const availableSuggestions = (0, _lodash.filter)(suggestions, _ref => {
+        let {
+          id
+        } = _ref;
+        return selectedIds.indexOf(id) === -1;
+      });
+      return availableSuggestions.map(v => v.name);
+    });
     this.debouncedUpdateSuggestions = (0, _lodash.debounce)(this.updateSuggestions, 100);
   }
 
   componentDidMount() {
+    this.setState({
+      isLoading: true
+    });
     (0, _apiFetch.default)({
       path: (0, _url.addQueryArgs)(`/wp/v2/${this.props.taxonomy}`, {
         per_page: -1,
@@ -77,6 +106,8 @@ class CategoryAutocomplete extends _element.Component {
       })
     }).then(categories => this.setState({
       allCategories: categories
+    })).finally(() => this.setState({
+      isLoading: false
     }));
   }
   /**
@@ -95,6 +126,9 @@ class CategoryAutocomplete extends _element.Component {
 
 
   updateSuggestions(search) {
+    this.setState({
+      isLoading: true
+    });
     (0, _apiFetch.default)({
       path: (0, _url.addQueryArgs)(`/wp/v2/${this.props.taxonomy}`, {
         search,
@@ -109,7 +143,9 @@ class CategoryAutocomplete extends _element.Component {
           [category.name]: category
         }), {})
       });
-    });
+    }).finally(() => this.setState({
+      isLoading: false
+    }));
   }
   /**
    * Prepare categories data for the API endpoint, call the change handler.
@@ -132,34 +168,37 @@ class CategoryAutocomplete extends _element.Component {
       value
     } = this.props;
     const {
-      suggestions,
-      allCategories
+      allCategories,
+      isLoading
     } = this.state;
     const classes = (0, _classnames.default)('newspack-category-autocomplete', className);
-    return (0, _jsxRuntime.jsx)("div", {
+    return (0, _jsxRuntime.jsxs)("div", {
       className: classes,
-      children: (0, _jsxRuntime.jsx)(_.FormTokenField, {
+      children: [(0, _jsxRuntime.jsx)(_.FormTokenField, {
         onInputChange: input => this.debouncedUpdateSuggestions(input),
         value: value.reduce((acc, item) => {
-          const category = typeof item === 'number' ? (0, _lodash.find)(allCategories, ['id', item]) : item;
+          const categoryOrItem = typeof item === 'number' ? (0, _lodash.find)(allCategories, ['id', item]) : item;
 
-          if (category) {
+          if (categoryOrItem) {
             acc.push({
-              id: category.term_id || category.id,
-              value: category.name
+              id: categoryOrItem.term_id || categoryOrItem.id,
+              value: categoryOrItem.value || categoryOrItem.name
             });
           }
 
           return acc;
         }, []),
-        suggestions: Object.keys(suggestions),
+        suggestions: this.getAvailableSuggestions(),
         onChange: this.handleOnChange,
         label: label,
         disabled: disabled,
         description: description,
         hideHelpFromVision: hideHelpFromVision,
         hideLabelFromVision: hideLabelFromVision
-      })
+      }), isLoading ? (0, _jsxRuntime.jsx)("span", {
+        className: "newspack-category-autocomplete__suggestions-spinner",
+        children: (0, _jsxRuntime.jsx)(_components.Spinner, {})
+      }) : null]
     });
   }
 

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

@@ -5,34 +5,32 @@
 @import '../../../shared/scss/colors';
 
 .newspack-category-autocomplete {
+	position: relative;
+
 	.components-form-token-field__help {
 		display: none;
 	}
 
-	.components-button:focus:not( :disabled ) {
-		box-shadow: inset 0 0 0 2px $primary-500;
-	}
-
-	// Multiple Select Controls
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
-
-	// Multiple Controls
-
-	+ .newspack-select-control,
-	+ .newspack-text-control,
-	+ .newspack-textarea-control,
-	+ .newspack-toggle-control {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
-
 	// Within a Grid
 
-	.newspack-grid & .newspack-form-token-field {
+	.newspack-grid & .newspack-form-token-field__input-container {
 		margin: 0;
 	}
+
+	// Loading state spinner
+	&__suggestions-spinner {
+		position: absolute;
+		right: 1px;
+		top: calc( 1.4em + 8px );
+		z-index: 2;
+
+		[class*='--label-hidden'] + & {
+			top: 0;
+		}
+
+		.components-spinner {
+			display: block;
+			margin: 7px;
+		}
+	}
 }

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

@@ -11,10 +11,12 @@ var _components = require("@wordpress/components");
 
 var _element = require("@wordpress/element");
 
-var _icons = require("@wordpress/icons");
-
 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"));
@@ -34,6 +36,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * Internal dependencies.
  */
+(0, _colord.extend)([_a11y.default]);
 const {
   InteractiveDiv
 } = _utils.default;
@@ -47,6 +50,7 @@ const ColorPicker = _ref => {
   } = _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));
 
@@ -55,44 +59,22 @@ const ColorPicker = _ref => {
     children: [(0, _jsxRuntime.jsx)("div", {
       className: "newspack-color-picker__label",
       children: label
-    }), (0, _jsxRuntime.jsxs)("div", {
+    }), (0, _jsxRuntime.jsx)(InteractiveDiv, {
+      className: 'newspack-color-picker__expander',
+      onClick: () => setIsExpanded(!isExpanded),
+      style: {
+        backgroundColor: color,
+        color: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
+      },
+      children: color
+    }), (0, _jsxRuntime.jsx)("div", {
       className: "newspack-color-picker__main",
       ref: ref,
-      children: [(0, _jsxRuntime.jsxs)(InteractiveDiv, {
-        className: (0, _classnames.default)('newspack-color-picker__expander', {
-          'newspack-color-picker__expander--expanded': isExpanded
-        }),
-        onClick: () => setIsExpanded(!isExpanded),
-        children: [(0, _jsxRuntime.jsxs)("div", {
-          children: [(0, _jsxRuntime.jsx)("div", {
-            className: "newspack-color-picker__indicator",
-            style: {
-              backgroundColor: color
-            }
-          }), (0, _jsxRuntime.jsx)("div", {
-            children: color
-          })]
-        }), (0, _jsxRuntime.jsx)(_icons.Icon, {
-          icon: _icons.chevronDown,
-          size: 18,
-          style: isExpanded ? {
-            transform: 'rotate(180deg)'
-          } : {}
-        })]
-      }), isExpanded && (0, _jsxRuntime.jsx)(_components.ColorPicker, {
+      children: isExpanded && (0, _jsxRuntime.jsx)(_components.ColorPicker, {
         color: color,
-        onChangeComplete: _ref2 => {
-          let {
-            hex
-          } = _ref2;
-          return onChange(hex);
-        } // Prop will be deprecated in favor of onChange, which expects a string hex value.
-        ,
-        disableAlpha: true // Prop will be deprecated in favor of enableAlpha, which behaves in the opposite manner.
-        ,
         onChange: hex => onChange(hex),
         enableAlpha: false
-      })]
+      })
     })]
   });
 };

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

@@ -7,174 +7,34 @@
 
 .newspack-color-picker {
 	position: relative;
-	margin: 32px 0;
 
-	&__main {
-		height: 48px;
-	}
-	&__expander {
-		padding: 11px 3px;
-		justify-content: space-between;
-		&,
-		> div {
-			display: flex;
-			align-items: center;
-		}
-		> div {
-			margin: 0 4px;
-		}
-		div + div {
-			margin-left: 8px;
-		}
-		&:focus {
-			border-color: $primary-500;
-			box-shadow: inset 0 0 0 2px $primary-500;
-		}
-		&--expanded:focus {
-			border-bottom-color: white;
-			box-shadow: inset 2px 2px 0 0 $primary-500, inset -2px 2px 0 0 $primary-500;
-
-			+ .components-color-picker {
-				position: relative;
-				border-bottom-color: $primary-500;
-				border-left-color: $primary-500;
-				border-right-color: $primary-500;
-				box-shadow: inset 2px -2px 0 0 $primary-500, inset -2px -2px 0 0 $primary-500;
-
-				&::before,
-				&::after {
-					background: $primary-500;
-					display: block;
-					content: '';
-					height: 1px;
-					left: -1px;
-					position: absolute;
-					top: -1px;
-					width: 3px;
-				}
-
-				&::after {
-					left: auto;
-					right: -1px;
-				}
-			}
-		}
-	}
-	&__indicator {
-		border: 1px solid rgba( black, 0.125 );
-		border-radius: 50%;
-		height: 24px;
-		overflow: hidden;
-		width: 24px;
-	}
 	&__label {
-		align-items: center;
-		color: $gray-900;
-		display: flex;
-		font-weight: bold;
-	}
-
-	&__expander,
-	.components-color-picker {
-		background-color: white;
-		border: 1px solid $gray-300;
-		border-radius: 3px;
-		&--expanded {
-			border-bottom-color: white;
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
-		}
-	}
-	.components-color-picker {
-		padding: 8px;
-		position: relative;
-		z-index: 1;
-		padding-top: 0;
-		border-top: none;
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
+		margin-bottom: 8px;
 	}
 
-	// Overrides of @wordpress/components component
-
-	// Inputs
-
-	.components-color-picker__body {
-		padding: 16px 0 0;
-	}
-
-	.components-color-picker__inputs-wrapper {
-		margin: 0;
-	}
-
-	.components-color-picker__inputs-fields {
-		margin-right: 8px;
-	}
-
-	.components-color-picker__inputs-field {
-		color: $gray-700;
-		font-size: 14px;
-		line-height: 24px;
-		margin: 0;
-
-		+ .components-color-picker__inputs-field {
-			margin-left: 8px;
-		}
-
-		label {
-			color: $gray-900;
-			font-size: inherit;
-			font-weight: bold;
-			line-height: inherit;
-			margin: 0;
-		}
-
-		input[type='number'],
-		input[type='text'] {
-			background: white;
-			border: 1px solid $gray-300;
-			border-radius: 3px;
-			box-shadow: none;
-			color: inherit;
-			font-size: 16px;
-			line-height: inherit;
-			margin: 0;
-			min-height: 48px;
-			padding: 11px 8px;
-			transition: border-color 125ms ease-in-out, box-shadow 125ms ease-in-out;
-			width: 100%;
-
-			@media screen and ( min-width: 768px ) {
-				font-size: inherit;
-			}
-
-			&:focus {
-				border-color: $primary-500;
-				box-shadow: 0 0 0 2px $primary-500;
-			}
-		}
-
-		// Reset
+	&__expander {
+		box-shadow: inset 0 0 0 1px rgb( 0 0 0 / 20% );
+		border-radius: 2px;
+		height: 64px;
+		padding: 12px;
+		text-align: right;
+		text-transform: uppercase;
 
-		.components-base-control__field,
-		.components-base-control__label {
-			display: block;
-			margin: 0;
+		&:focus-visible {
+			box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+			border-color: white;
 		}
 	}
 
-	.components-color-picker__inputs-toggle {
-		height: 36px;
-		margin-bottom: 6px;
-
-		&:active,
-		&:focus:not( :disabled ),
-		&:hover {
-			color: $primary-500;
-		}
-
-		&:focus:not( :disabled ) {
-			box-shadow: 0 0 0 3px $primary-500;
+	&__main {
+		background: white;
+		box-shadow: 0 0 8px 4px rgba( black, 0.08 );
+		margin: 12px 0;
+		position: absolute;
+		z-index: 2;
+
+		&:empty {
+			display: none;
 		}
 	}
 }

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

@@ -6,27 +6,17 @@
 @import '~@wordpress/base-styles/colors';
 
 .newspack-custom-select-control {
-	color: $gray-700;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
-
 	label {
-		color: $gray-900;
 		display: block;
-		font-size: 14px;
-		font-weight: bold;
-		line-height: 24px;
-		padding-bottom: 0 !important;
+		margin-bottom: 8px;
 	}
 
 	.components-custom-select-control__button {
-		border-color: $gray-300;
-		border-radius: 3px;
-		color: $gray-700;
-		font-size: 14px;
-		line-height: 24px;
-		min-height: 48px;
+		border-color: $gray-700;
+		border-radius: 2px;
+		color: $gray-900;
+		font-size: inherit;
+		min-height: 30px;
 		min-width: 100%;
 		padding-right: 24px;
 
@@ -34,17 +24,16 @@
 		&:focus,
 		&:hover,
 		&[aria-expanded='true'] {
-			color: $gray-700;
+			color: $gray-900;
 		}
 
 		&:focus {
-			border-color: $primary-500;
-			box-shadow: inset 0 0 0 2px #36f;
+			border-color: var( --wp-admin-theme-color );
+			box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color );
 		}
 
 		&-icon {
 			right: 3px;
-			transition: transform 50ms ease-in-out;
 			width: 18px;
 		}
 
@@ -54,10 +43,9 @@
 	}
 
 	.components-custom-select-control__menu {
-		border-color: $gray-300;
-		border-radius: 3px;
+		border-color: $gray-700;
+		border-radius: 2px;
 		box-shadow: 0 4px 8px rgba( black, 0.08 );
-		color: $gray-700;
 		margin: 8px 0 0;
 		min-width: 222px;
 	}
@@ -77,7 +65,6 @@
 
 		&.is-header {
 			background: $gray-100;
-			color: $gray-900;
 			cursor: default;
 			font-weight: bold;
 			margin-left: 0;
@@ -86,7 +73,7 @@
 
 		&.is-highlighted {
 			background: white;
-			color: $primary-500;
+			color: var( --wp-admin-theme-color );
 		}
 
 		&.is-selected {
@@ -103,21 +90,4 @@
 			}
 		}
 	}
-
-	// Multiple Select Controls
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
-
-	// Multiple Controls
-
-	+ .newspack-category-autocomplete,
-	+ .newspack-select-control,
-	+ .newspack-text-control,
-	+ .newspack-textarea-control {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
 }

package/dist/cjs/footer/index.js

@@ -28,21 +28,28 @@ const Footer = _ref => {
   let {
     simple
   } = _ref;
-  const componentsDemo = window && window.newspack_urls && window.newspack_urls.components_demo;
-  const setupWizard = window && window.newspack_urls && window.newspack_urls.setup_wizard;
-  const resetUrl = window && window.newspack_urls && window.newspack_urls.reset_url;
-  const pluginVersion = window && window.newspack_urls && window.newspack_urls.plugin_version;
-  const removeStarterContent = window && window.newspack_urls && window.newspack_urls.remove_starter_content;
+  const {
+    components_demo: componentsDemo = false,
+    support = false,
+    setup_wizard: setupWizard = false,
+    reset_url: resetUrl = false,
+    plugin_version: pluginVersion = {
+      label: 'Newspack'
+    },
+    remove_starter_content: removeStarterContent = false,
+    support_email: supportEmail
+  } = window.newspack_urls || {};
   const footerElements = [{
     label: pluginVersion.label,
-    url: pluginVersion.url
+    url: 'https://newspack.pub/category/release-notes/',
+    external: true
   }, {
     label: __('About', 'newspack'),
     url: 'https://newspack.pub/',
     external: true
   }, {
     label: __('Documentation', 'newspack'),
-    url: 'https://newspack.pub/support/',
+    url: support,
     external: true
   }];
 
@@ -74,6 +81,13 @@ const Footer = _ref => {
     });
   }
 
+  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", {

package/dist/cjs/footer/style.scss

@@ -2,7 +2,6 @@
  * Footer
  */
 
-@import '../../../shared/scss/colors';
 @import '~@wordpress/base-styles/colors';
 
 .newspack-footer {
@@ -45,17 +44,17 @@
 
 	li {
 		margin: 8px;
-	}
 
-	a {
-		align-items: flex-end;
-		color: inherit;
-		display: flex;
+		a {
+			align-items: flex-end;
+			color: inherit;
+			display: flex;
 
-		&:active,
-		&:focus,
-		&:hover {
-			color: $gray-900;
+			&:active,
+			&:focus,
+			&:hover {
+				color: $gray-900;
+			}
 		}
 	}
 

package/dist/cjs/form-token-field/index.js

@@ -53,8 +53,8 @@ class FormTokenField extends _element.Component {
       children: [(0, _jsxRuntime.jsx)(_components.FormTokenField, {
         className: classes,
         ...otherProps
-      }), description && (0, _jsxRuntime.jsx)("div", {
-        className: "i",
+      }), description && (0, _jsxRuntime.jsx)("p", {
+        className: "newspack-form-token-field__help",
         children: description
       })]
     });