newspack-components 2.0.3 → 2.2.0

package/dist/cjs/card/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");
-
 /**
  * Card
  */
@@ -30,6 +24,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * External dependencies
  */
+
 class Card extends _element.Component {
   /**
    * Render
@@ -39,19 +34,19 @@ class Card extends _element.Component {
       buttonsCard,
       className,
       headerActions,
+      isNarrow,
       isMedium,
       isSmall,
+      isWhite,
       noBorder,
       ...otherProps
     } = this.props;
-    const classes = (0, _classnames.default)('newspack-card', className, buttonsCard && 'newspack-card__buttons-card', headerActions && 'newspack-card__header-actions', isMedium && 'newspack-card__is-medium', isSmall && 'newspack-card__is-small', noBorder && 'newspack-card__no-border');
+    const classes = (0, _classnames.default)('newspack-card', className, buttonsCard && 'newspack-card__buttons-card', headerActions && 'newspack-card__header-actions', isMedium && 'newspack-card__is-medium', isNarrow && 'newspack-card__is-narrow', isSmall && 'newspack-card__is-small', isWhite && 'newspack-card__is-white', noBorder && 'newspack-card__no-border');
     return (0, _jsxRuntime.jsx)("div", {
       className: classes,
       ...otherProps
     });
   }
-
 }
-
 var _default = Card;
 exports.default = _default;

package/dist/cjs/card/style.scss

@@ -2,13 +2,12 @@
  * Card
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-card {
-	border-radius: 3px;
-	border: 1px solid $gray-300;
-	color: $gray-700;
+	border-radius: 2px;
+	border: 1px solid wp-colors.$gray-300;
+	color: wp-colors.$gray-900;
 	margin: 32px 0;
 	padding: 16px 48px;
 
@@ -21,11 +20,8 @@
 	&__buttons-card {
 		display: flex;
 		flex-wrap: wrap;
-		margin: 32px -8px 16px;
-
-		.newspack-button {
-			margin: 0 8px 16px;
-		}
+		gap: 16px;
+		margin: 32px 0;
 	}
 
 	// Header Actions Card
@@ -34,6 +30,7 @@
 		align-items: center;
 		display: flex;
 		flex-wrap: wrap;
+		gap: 8px;
 		justify-content: space-between;
 		margin-bottom: -16px;
 
@@ -41,6 +38,23 @@
 			margin-bottom: 0 !important;
 			margin-top: 0 !important;
 		}
+
+		.newspack-select-control {
+			.components-base-control__field {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	// Is Narrow
+
+	&__is-narrow {
+		margin-left: auto;
+		margin-right: auto;
+
+		@media screen and ( min-width: 608px ) {
+			max-width: 576px;
+		}
 	}
 
 	// Is Small
@@ -79,65 +93,48 @@
 		}
 	}
 
-	// No Border
+	// Is White
 
-	&__no-border {
-		border-radius: 0;
+	&__is-white {
+		background: white;
 		border: 0;
-		padding: 0;
 	}
 
-	// Typography
+	// No Border
 
-	h2,
-	h3,
-	p {
-		line-height: 24px;
-		margin: 32px 0;
+	&__no-border {
+		border-radius: 0;
+		border: 0;
 		padding: 0;
 	}
 
-	h2 {
-		color: $gray-900;
-		font-size: 17px;
-		font-weight: bold;
-	}
+	// Margin
 
-	h3 {
-		color: $gray-900;
-		font-size: 14px;
-		font-weight: bold;
+	&.mt64 {
+		margin-top: 64px;
 	}
 
-	p {
-		font-size: 14px;
-
-		&.is-dark {
-			color: $gray-900;
-		}
+	&.mt16 {
+		margin-top: 16px;
 	}
 
-	strong {
-		font-weight: bold;
-	}
+	// Typography
 
 	small {
 		font-size: 12px;
-		line-height: 16px;
+		line-height: 1.4;
 	}
 
 	code {
-		background: $gray-100;
-		color: $gray-700;
-		font-size: 12px;
-		line-height: 16px;
-		padding: 4px 8px;
+		background: wp-colors.$gray-100;
+		color: wp-colors.$gray-900;
+		padding: 0 0.5em;
 	}
 
 	// Thematic Break
 
 	hr {
-		background: $gray-300;
+		background: wp-colors.$gray-300;
 		border: 0;
 		height: 1px;
 		margin: 48px 0;
@@ -150,7 +147,7 @@
 	// Separator
 
 	.sep {
-		background: $gray-300;
+		background: wp-colors.$gray-300;
 		height: 1px;
 		margin-left: 8px;
 		margin-right: 8px;
@@ -158,27 +155,14 @@
 
 		&__inline {
 			display: inline-block;
-			line-height: 24px;
+			line-height: 1.5;
 			vertical-align: middle;
 		}
 	}
 
-	// Links
-
-	a {
-		color: $primary-500;
+	// Error
 
-		&:active,
-		&:focus,
-		&:hover {
-			color: $primary-600;
-			text-decoration: none;
-		}
-
-		&:focus {
-			box-shadow: none;
-			outline: 2px solid $primary-500;
-			outline-offset: 2px;
-		}
+	.newspack-error {
+		color: wp-colors.$alert-red;
 	}
 }

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

@@ -1,30 +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
  */
@@ -43,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.
    */
@@ -52,24 +43,54 @@ class CategoryAutocomplete extends _element.Component {
     super(props);
     (0, _defineProperty2.default)(this, "state", {
       suggestions: {},
-      allCategories: {}
+      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.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);
     });
-    this.debouncedUpdateSuggestions = (0, _lodash.debounce)(this.updateSuggestions, 100);
+    (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, _filter.default)(suggestions, _ref => {
+        let {
+          id
+        } = _ref;
+        return selectedIds.indexOf(id) === -1;
+      });
+      return availableSuggestions.map(v => v.name);
+    });
+    this.debouncedUpdateSuggestions = (0, _debounce.default)(this.updateSuggestions, 100);
   }
-
   componentDidMount() {
+    this.setState({
+      isLoading: true
+    });
     (0, _apiFetch.default)({
       path: (0, _url.addQueryArgs)(`/wp/v2/${this.props.taxonomy}`, {
         per_page: -1,
@@ -77,24 +98,27 @@ class CategoryAutocomplete extends _element.Component {
       })
     }).then(categories => this.setState({
       allCategories: categories
+    })).finally(() => this.setState({
+      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
+    });
     (0, _apiFetch.default)({
       path: (0, _url.addQueryArgs)(`/wp/v2/${this.props.taxonomy}`, {
         search,
@@ -105,19 +129,15 @@ class CategoryAutocomplete extends _element.Component {
       })
     }).then(categories => {
       this.setState({
-        suggestions: categories.reduce((accumulator, category) => ({ ...accumulator,
+        suggestions: categories.reduce((accumulator, category) => ({
+          ...accumulator,
           [category.name]: category
         }), {})
       });
-    });
+    }).finally(() => this.setState({
+      isLoading: false
+    }));
   }
-  /**
-   * Prepare categories data for the API endpoint, call the change handler.
-   *
-   * @param {Array} tokens An array of category tokens.
-   */
-
-
   /**
    * Render the component.
    */
@@ -132,39 +152,38 @@ 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;
-
-          if (category) {
+          const categoryOrItem = typeof item === 'number' ? (0, _find.default)(allCategories, ['id', item]) : item;
+          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]
     });
   }
-
 }
-
 CategoryAutocomplete.defaultProps = {
   taxonomy: 'categories'
 };

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

@@ -2,37 +2,33 @@
  * Category Autocomplete
  */
 
-@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

@@ -1,28 +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 _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"));
-
 require("./style.scss");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * WordPress dependencies.
  */
@@ -34,10 +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,
@@ -47,55 +39,31 @@ 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));
-
   return (0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)('newspack-color-picker', className),
     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
-      })]
+      })
     })]
   });
 };
-
 var _default = ColorPicker;
 exports.default = _default;