newspack-components 4.1.0 → 4.3.0

package/colors/colors.module.scss

@@ -6,7 +6,7 @@
 @use "sass:color";
 
 @function to-rgb($color) {
-	@return color.red($color) + ", " + color.green($color) + ", " + color.blue($color);
+	@return color.channel($color, "red", $space: rgb) + ", " + color.channel($color, "green", $space: rgb) + ", " + color.channel($color, "blue", $space: rgb);
 }
 
 // Primary: Hex

package/dist/cjs/action-card/index.js

@@ -36,13 +36,14 @@ var _jsxRuntime = require("react/jsx-runtime");
  * @return {JSX.Element} ActionCard component.
  */const ActionCard = ({
   badge,
-  badgeLevel = 'info',
+  badgeLevel,
   className,
   checkbox,
   children,
   collapse,
   disabled,
   title,
+  heading = 2,
   description,
   handoff,
   editLink,
@@ -67,11 +68,13 @@ var _jsxRuntime = require("react/jsx-runtime");
   titleLink,
   toggleChecked = false,
   toggleOnChange,
+  togglePosition = 'leading',
   hasGreyHeader,
   hasWhiteHeader,
   noBorder,
   isPending,
   expandable = false,
+  isExpanded,
   isButtonEnabled = false,
   // Draggable props. All are required to enable drag sorting.
   draggable = false,
@@ -79,10 +82,15 @@ var _jsxRuntime = require("react/jsx-runtime");
   dragWrapperRef,
   onDragCallback
 }) => {
-  const [expanded, setExpanded] = (0, _element.useState)(false);
+  const [expanded, setExpanded] = (0, _element.useState)(Boolean(isExpanded));
   const [dragging, setDragging] = (0, _element.useState)(false);
   const [targetIndex, setTargetIndex] = (0, _element.useState)(null);
   const [dragRef, setDragRef] = (0, _element.useState)(null);
+  (0, _element.useEffect)(() => {
+    if (typeof isExpanded === 'boolean') {
+      setExpanded(isExpanded);
+    }
+  }, [isExpanded]);
   (0, _element.useEffect)(() => {
     if (dragWrapperRef && !dragRef) {
       setDragRef(dragWrapperRef);
@@ -104,16 +112,19 @@ var _jsxRuntime = require("react/jsx-runtime");
     onClick: () => toggleOnChange(!toggleChecked),
     tabIndex: '0'
   } : {};
+  const togglePositionClass = togglePosition === 'trailing' ? 'is-toggle-trailing' : 'is-toggle-leading';
   const hasInternalLink = href && href.indexOf('http') !== 0;
   const isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
   const badges = !Array.isArray(badge) && badge ? [badge] : badge;
-  const Component = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  const HeadingTag = `h${heading}`;
+  const cardContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-action-card__region newspack-action-card__region-top",
       children: [toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
         checked: toggleChecked,
         onChange: toggleOnChange,
-        disabled: disabled
+        disabled: disabled,
+        className: togglePositionClass
       }), image && !toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "newspack-action-card__region newspack-action-card__region-left",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
@@ -137,7 +148,7 @@ var _jsxRuntime = require("react/jsx-runtime");
           columns: 1,
           gutter: 8,
           noMargin: true,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(HeadingTag, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
               className: "newspack-action-card__title",
               ...titleProps,
@@ -214,10 +225,10 @@ var _jsxRuntime = require("react/jsx-runtime");
         isWarning: true,
         rawHTML: notificationHTML
       })]
-    }), children && (expandable && expanded || !expandable) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), children && (expandable && expanded || !expandable) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "newspack-action-card__region-children",
       children: children
-    })]
+    }) : null]
   });
   if (draggable && dragRef?.current && typeof dragIndex === 'number' && onDragCallback && id) {
     let wrapperRect = dragRef.current.getBoundingClientRect();
@@ -288,9 +299,7 @@ var _jsxRuntime = require("react/jsx-runtime");
               onDragStart: onDraggableStart,
               onDragEnd: onDraggableEnd,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-                icon: _icons.dragHandle,
-                height: 18,
-                width: 18
+                icon: _icons.dragHandle
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: "movers",
@@ -306,7 +315,7 @@ var _jsxRuntime = require("react/jsx-runtime");
                 label: (0, _i18n.__)('Move one position down', 'newspack-plugin')
               })]
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {})]
+          }), cardContent]
         })
       })
     });
@@ -316,7 +325,7 @@ var _jsxRuntime = require("react/jsx-runtime");
     onClick: simple && onClick,
     id: id !== null && id !== void 0 ? id : null,
     noBorder: noBorder,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {})
+    children: cardContent
   });
 };
 var _default = exports.default = ActionCard;

package/dist/cjs/action-card/style.scss

@@ -55,7 +55,7 @@
 			.components-toggle-control {
 				margin-bottom: 16px;
 
-				@media screen and ( min-width: 744px ) {
+				@media screen and (min-width: 744px) {
 					margin-bottom: 0;
 					margin-right: 16px;
 				}
@@ -77,10 +77,6 @@
 			padding: 0 4px;
 		}
 
-		& + & {
-			margin-top: -16px;
-		}
-
 		&.mv0 {
 			border-left-color: wp-colors.$gray-300;
 			border-radius: 0;
@@ -122,7 +118,7 @@
 			.components-toggle-control {
 				margin-bottom: 16px;
 
-				@media screen and ( min-width: 744px ) {
+				@media screen and (min-width: 744px) {
 					margin-bottom: 0;
 					margin-right: 16px;
 				}
@@ -132,7 +128,7 @@
 		.newspack-action-card__region-left {
 			margin-bottom: 16px;
 
-			@media screen and ( min-width: 744px ) {
+			@media screen and (min-width: 744px) {
 				margin-bottom: 0;
 				margin-right: 16px;
 			}
@@ -252,7 +248,7 @@
 		padding: 24px;
 		display: block;
 
-		@media screen and ( min-width: 744px ) {
+		@media screen and (min-width: 744px) {
 			display: flex;
 		}
 
@@ -261,9 +257,19 @@
 			margin-bottom: 24px;
 			margin-top: 0;
 
-			@media screen and ( min-width: 744px ) {
+			@media screen and (min-width: 744px) {
 				margin-bottom: 0;
 				margin-right: 24px;
+
+				&.is-toggle-trailing {
+					margin-left: 24px;
+					margin-right: 0;
+					order: 999;
+				}
+			}
+
+			label {
+				display: none;
 			}
 
 			.components-base-control__field {
@@ -308,7 +314,7 @@
 	.newspack-action-card__region-left {
 		margin-bottom: 24px;
 
-		@media screen and ( min-width: 744px ) {
+		@media screen and (min-width: 744px) {
 			margin-bottom: 0;
 			margin-right: 24px;
 		}
@@ -335,7 +341,7 @@
 		margin-top: 24px;
 		text-align: right;
 
-		@media screen and ( min-width: 744px ) {
+		@media screen and (min-width: 744px) {
 			align-items: flex-end;
 			flex-direction: column;
 			margin-left: 24px;
@@ -437,13 +443,21 @@
 			text-decoration: inherit;
 		}
 
-		.newspack-action-card__region-children {
-			border-top: 1px solid wp-colors.$gray-100;
+		> .newspack-action-card__region-children {
+			border-top: 1px solid wp-colors.$gray-300;
 			padding-top: 24px;
 
 			+ .newspack-action-card__region-children {
 				border-top: none;
 			}
+
+			> * + * {
+				margin-top: 24px !important;
+			}
+
+			.newspack-action-card__region-children:has(> div:not(:empty)) {
+				margin-top: 16px;
+			}
 		}
 
 		&.is-medium .newspack-action-card__region-children {
@@ -473,6 +487,11 @@
 			margin-left: 8px;
 		}
 	}
+
+	hr:not(.newspack-divider) {
+		background: wp-colors.$gray-100;
+		margin: 0;
+	}
 }
 
 .newspack-card {
@@ -557,7 +576,6 @@
 		}
 
 		.newspack-action-card__region-top {
-			flex: 1 1 auto;
 			padding: 8px 16px 8px 0 !important;
 			flex: 1;
 		}

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

@@ -143,7 +143,7 @@ var _jsxRuntime = require("react/jsx-runtime");
         Object.keys(validValues).forEach(key => {
           if (validValues[key] === label) {
             // Preserve numeric or string type of values. Object.keys will convert numbers to strings.
-            const value = isNaN(parseInt(key)) ? key.toString() : parseInt(key);
+            const value = /^\d+$/.test(key.toString()) ? parseInt(key) : key.toString();
             acc.push({
               value,
               label
@@ -153,7 +153,7 @@ var _jsxRuntime = require("react/jsx-runtime");
         return acc;
       }, []);
     }
-    return labels.map(label => Object.keys(validValues).map(key => isNaN(parseInt(key)) ? key.toString() : parseInt(key)).find(key => validValues[key] === label));
+    return labels.map(label => Object.keys(validValues).map(key => /^\d+$/.test(key.toString()) ? parseInt(key) : key.toString()).find(key => validValues[key] === label));
   }
 
   /**

package/dist/cjs/autocomplete-with-latest-posts/index.js

@@ -0,0 +1,289 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
+var _components = require("@wordpress/components");
+var _htmlEntities = require("@wordpress/html-entities");
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _url = require("@wordpress/url");
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+const AutocompleteWithLatestPosts = ({
+  fetchSuggestions = false,
+  // If passed, will use this function to fetch suggestions data.
+  help = (0, _i18n.__)('Begin typing search term, click autocomplete result to select.', 'newspack-plugin'),
+  hideHelp = true,
+  // If true, all help text will be hidden.
+  hideFormTokenHelp = true,
+  // If true, hides FormTokenField's built-in help text.
+  label = (0, _i18n.__)('Search', 'newspack-plugin'),
+  maxItemsToSuggest = 0,
+  // If passed, will be used to determine "load more" state. Necessary if you want "load more" functionality when using a custom `fetchSuggestions` function.
+  multiSelect = false,
+  // If true, component can select multiple values at once.
+  onChange = false,
+  // Function to call when selections change.
+  selectedItems = [],
+  // Array of saved items.
+  suggestionsToFetch = 20 // Number of suggestions to fetch per query.
+}) => {
+  const [isLoading, setIsLoading] = (0, _element.useState)(true);
+  const [isLoadingMore, setIsLoadingMore] = (0, _element.useState)(false);
+  const [suggestions, setSuggestions] = (0, _element.useState)([]);
+  const [maxSuggestions, setMaxSuggestions] = (0, _element.useState)(0);
+  const [searchSuggestions, setSearchSuggestions] = (0, _element.useState)([]);
+  const [validValues, setValidValues] = (0, _element.useState)({});
+  const [isSearching, setIsSearching] = (0, _element.useState)(false);
+  // Leaving this in here so we can expand to use different post types in the future; right now it defaults to 'post'.
+  const postTypeToSearch = 'post';
+  const classNames = ['newspack-autocomplete-with-latest-posts'];
+  if (hideFormTokenHelp) {
+    classNames.push('hide-form-token-help');
+  }
+  if (hideHelp) {
+    classNames.push('hide-help');
+  }
+
+  /**
+   * Debounced function to update search suggestions.
+   */
+  const debouncedUpdateSuggestions = (0, _debounce.default)(input => {
+    if (!input || input.length < 2) {
+      setSearchSuggestions([]);
+      setIsSearching(false);
+      return;
+    }
+    setIsSearching(true);
+    handleFetchSuggestions(input, 0, postTypeToSearch).then(_suggestions => {
+      setSearchSuggestions(_suggestions);
+      // Update valid values for token conversion
+      const newValidValues = {
+        ...validValues
+      };
+      _suggestions.forEach(suggestion => {
+        newValidValues[suggestion.value] = suggestion.label;
+      });
+      setValidValues(newValidValues);
+    }).finally(() => setIsSearching(false));
+  }, 500);
+
+  /**
+   * Fetch recent posts to show as suggestions.
+   */
+  (0, _element.useEffect)(() => {
+    setIsLoading(true);
+    handleFetchSuggestions(null, 0, postTypeToSearch).then(_suggestions => {
+      if (0 < _suggestions.length) {
+        setSuggestions(_suggestions);
+        // Update valid values for token conversion
+        const newValidValues = {
+          ...validValues
+        };
+        _suggestions.forEach(suggestion => {
+          newValidValues[suggestion.value] = suggestion.label;
+        });
+        setValidValues(newValidValues);
+      }
+    }).finally(() => setIsLoading(false));
+  }, []);
+
+  /**
+   * Fetch more suggestions.
+   */
+  (0, _element.useEffect)(() => {
+    if (isLoadingMore) {
+      handleFetchSuggestions(null, suggestions.length, postTypeToSearch).then(_suggestions => {
+        if (0 < _suggestions.length) {
+          setSuggestions(suggestions.concat(_suggestions));
+        }
+      }).finally(() => setIsLoadingMore(false));
+    }
+  }, [isLoadingMore]);
+
+  /**
+   * If passed a `fetchSuggestions` prop, use that, otherwise, build it based on the selected post type.
+   */
+  const handleFetchSuggestions = fetchSuggestions ? fetchSuggestions : async (search = null, offset = 0, searchSlug = null) => {
+    const postTypeSlug = searchSlug || postTypeToSearch;
+    const endpoint = 'post' === postTypeSlug || 'page' === postTypeSlug ? postTypeSlug + 's' // Default post type endpoints are plural.
+    : postTypeSlug; // Custom post type endpoints are singular.
+    const response = await (0, _apiFetch.default)({
+      parse: false,
+      path: (0, _url.addQueryArgs)('/wp/v2/' + endpoint, {
+        search,
+        offset,
+        per_page: suggestionsToFetch,
+        _fields: 'id,title'
+      })
+    });
+    const total = parseInt(response.headers.get('x-wp-total') || 0);
+    const posts = await response.json();
+    setMaxSuggestions(total);
+
+    // Format suggestions for FormTokenField display.
+    return posts.reduce((acc, post) => {
+      acc.push({
+        value: parseInt(post.id),
+        label: (0, _htmlEntities.decodeEntities)(post?.title.rendered) || (0, _i18n.__)('(no title)', 'newspack-plugin')
+      });
+      return acc;
+    }, []);
+  };
+
+  /**
+   * Get labels for token values.
+   */
+  const getLabelsForValues = values => {
+    return values.reduce((accumulator, value) => {
+      if (!value) {
+        return accumulator;
+      }
+      if (value.label) {
+        return [...accumulator, value.label];
+      }
+      return validValues[value] ? [...accumulator, validValues[value]] : accumulator;
+    }, []);
+  };
+
+  /**
+   * Get values for token labels.
+   */
+  const getValuesForLabels = labels => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    return labels.reduce((acc, label) => {
+      Object.keys(validValues).forEach(key => {
+        if (validValues[key] === label) {
+          const value = isNaN(parseInt(key)) ? key.toString() : parseInt(key);
+          acc.push({
+            value,
+            label
+          });
+        }
+      });
+      return acc;
+    }, []);
+  };
+
+  /**
+   * Handle FormTokenField onChange.
+   */
+  const handleTokenChange = tokenStrings => {
+    const newSelections = getValuesForLabels(tokenStrings);
+
+    // If only allowing one selection, just return the one selected item.
+    if (!multiSelect) {
+      const newSelection = newSelections[newSelections.length - 1]; // Get the last selected item
+      if (newSelection) {
+        return onChange([{
+          ...newSelection,
+          postType: postTypeToSearch
+        }]);
+      }
+      return onChange([]);
+    }
+
+    // For multi-select, include currently selected post type in selection results.
+    onChange(newSelections.map(selection => ({
+      ...selection,
+      postType: postTypeToSearch
+    })));
+  };
+
+  /**
+   * Get tokens for FormTokenField.
+   */
+  const getTokens = () => {
+    return getLabelsForValues(selectedItems);
+  };
+
+  /**
+   * Render a single suggestion object that can be clicked to select it immediately.
+   *
+   * @param {Object} suggestion Suggestion object with value and label keys.
+   */
+  const renderSuggestion = suggestion => {
+    if (multiSelect) {
+      const isSelected = !!selectedItems.find(_selection => parseInt(_selection.value) === parseInt(suggestion.value) && _selection.label === suggestion.label);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
+        checked: isSelected,
+        onChange: () => {
+          // For multi-select, we need to toggle the selection
+          const currentTokens = getTokens();
+          const suggestionLabel = suggestion.label;
+          if (isSelected) {
+            // Remove the suggestion
+            const newTokens = currentTokens.filter(token => token !== suggestionLabel);
+            handleTokenChange(newTokens);
+          } else {
+            // Add the suggestion
+            handleTokenChange([...currentTokens, suggestionLabel]);
+          }
+        },
+        label: suggestion.label
+      }, suggestion.value);
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      isLink: true,
+      onClick: () => handleTokenChange([...getTokens(), suggestion.label]),
+      children: suggestion.label
+    }, suggestion.value);
+  };
+
+  /**
+   * Render a list of suggestions that can be clicked to select instead of searching by title.
+   */
+  const renderSuggestions = () => {
+    if (0 === suggestions.length) {
+      return null;
+    }
+    const className = multiSelect ? 'newspack-autocomplete-with-latest-posts__search-suggestions-multiselect' : 'newspack-autocomplete-with-latest-posts__search-suggestions';
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "newspack-autocomplete-with-latest-posts__search-suggestions-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: "newspack-autocomplete-with-suggestions__label",
+          children: (0, _i18n.__)('Latest Posts', 'newspack-plugin')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: className,
+          children: [suggestions.map(renderSuggestion), suggestions.length < (maxItemsToSuggest || maxSuggestions) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+            disabled: isLoadingMore,
+            isSecondary: true,
+            onClick: () => setIsLoadingMore(true),
+            children: isLoadingMore ? (0, _i18n.__)('Loading…', 'newspack-plugin') : (0, _i18n.__)('Load more', 'newspack-plugin')
+          })]
+        })]
+      })
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: classNames.join(' '),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "newspack-autocomplete-with-latest-posts__input-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FormTokenField, {
+        value: getTokens(),
+        suggestions: searchSuggestions.map(suggestion => suggestion.label),
+        onChange: handleTokenChange,
+        onInputChange: debouncedUpdateSuggestions,
+        label: label,
+        help: !hideHelp && help,
+        __next40pxDefaultSize: true,
+        __nextHasNoMarginBottom: true
+      }), (isLoading || isSearching) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})]
+    }), renderSuggestions()]
+  });
+};
+var _default = exports.default = AutocompleteWithLatestPosts;