newspack-components 4.1.0 → 4.3.0

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

@@ -0,0 +1,281 @@
+/**
+ * External dependencies
+ */
+import debounce from 'lodash/debounce';
+
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { Button, CheckboxControl, FormTokenField, Spinner } from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+import './style.scss';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const AutocompleteWithLatestPosts = ({
+  fetchSuggestions = false,
+  // If passed, will use this function to fetch suggestions data.
+  help = __('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 = __('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] = useState(true);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [suggestions, setSuggestions] = useState([]);
+  const [maxSuggestions, setMaxSuggestions] = useState(0);
+  const [searchSuggestions, setSearchSuggestions] = useState([]);
+  const [validValues, setValidValues] = useState({});
+  const [isSearching, setIsSearching] = 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 = debounce(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.
+   */
+  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.
+   */
+  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 apiFetch({
+      parse: false,
+      path: 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: decodeEntities(post?.title.rendered) || __('(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__*/_jsx(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__*/_jsx(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__*/_jsx(_Fragment, {
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "newspack-autocomplete-with-latest-posts__search-suggestions-container",
+        children: [/*#__PURE__*/_jsx("p", {
+          className: "newspack-autocomplete-with-suggestions__label",
+          children: __('Latest Posts', 'newspack-plugin')
+        }), /*#__PURE__*/_jsxs("div", {
+          className: className,
+          children: [suggestions.map(renderSuggestion), suggestions.length < (maxItemsToSuggest || maxSuggestions) && /*#__PURE__*/_jsx(Button, {
+            disabled: isLoadingMore,
+            isSecondary: true,
+            onClick: () => setIsLoadingMore(true),
+            children: isLoadingMore ? __('Loading…', 'newspack-plugin') : __('Load more', 'newspack-plugin')
+          })]
+        })]
+      })
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames.join(' '),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "newspack-autocomplete-with-latest-posts__input-container",
+      children: [/*#__PURE__*/_jsx(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__*/_jsx(Spinner, {})]
+    }), renderSuggestions()]
+  });
+};
+export default AutocompleteWithLatestPosts;

package/dist/esm/autocomplete-with-latest-posts/style.scss

@@ -0,0 +1,150 @@
+/**
+* Styles for AutocompleteWithLatestPosts component.
+*/
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-autocomplete-with-latest-posts {
+	display: grid;
+	gap: 16px;
+	width: 100%;
+
+	.components-select-control__input {
+		max-width: none;
+	}
+
+	.components-input-control__backdrop {
+		border-color: wp-colors.$gray-700 !important;
+	}
+
+	.newspack-autocomplete-with-latest-posts__label,
+	.components-form-token-field__label,
+	.components-input-control__label,
+	.components-checkbox-control__label {
+		color: wp-colors.$gray-900 !important;
+	}
+
+	.newspack-autocomplete-tokenfield__help {
+		font-size: inherit;
+		margin-bottom: 8px !important;
+	}
+
+	.components-form-token-field {
+		&__input-container {
+			border-color: wp-colors.$gray-700;
+		}
+
+		&__suggestion {
+			padding: 8px;
+		}
+	}
+
+	// Hide the built-in "Separate with commas or the Enter key." help text when hideFormTokenHelp is true
+	&.hide-form-token-help .components-form-token-field__help {
+		display: none;
+	}
+
+	p.newspack-autocomplete-with-latest-posts__label {
+		font-size: inherit;
+		margin: 0 0 8px;
+	}
+
+	&__selected-items {
+		border-bottom: 1px solid wp-colors.$gray-700;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		margin-bottom: 16px;
+		padding-bottom: 12px;
+
+		p.newspack-autocomplete-with-latest-posts__label {
+			flex: 0 0 100%;
+			margin: 0;
+		}
+	}
+
+	&__selected-item-button.components-button.is-tertiary {
+		background-color: wp-colors.$gray-300;
+		border-radius: 2px;
+		color: wp-colors.$gray-900;
+		font-size: 13px;
+		height: auto;
+		margin: 0;
+		padding-left: 8px;
+		padding-right: 8px;
+
+		&::after {
+			content: "✕";
+			margin-left: 8px;
+		}
+
+		&:hover {
+			box-shadow: none;
+			color: black;
+		}
+	}
+
+	&__search-suggestions,
+	&__search-suggestions-multiselect {
+		max-height: 220px;
+		overflow: visible auto;
+		margin: 0 -4px;
+		padding: 4px 4px 0;
+
+		.components-button {
+			display: block;
+			line-height: normal;
+			margin: auto;
+
+			&.is-link {
+				color: wp-colors.$gray-900;
+				padding: 8px;
+				text-decoration: none;
+				width: 100%;
+
+				&:active:not(:disabled),
+				&:hover:not(:disabled) {
+					background: wp-colors.$gray-900;
+					background: var(--wp-admin-theme-color);
+					color: white;
+				}
+			}
+			&.is-secondary {
+				margin-bottom: 8px;
+				margin-top: 8px;
+				width: 100%;
+			}
+		}
+	}
+
+	&__search-suggestions {
+		border-radius: 2px;
+		border: 1px solid wp-colors.$gray-700;
+		padding: 0;
+
+		.components-button {
+			line-height: normal;
+
+			&:focus:not(:disabled) {
+				border-radius: 0;
+				box-shadow: inset 0 0 0 1.5px wp-colors.$gray-900;
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			}
+
+			&.is-secondary {
+				width: calc(100% - 16px);
+			}
+		}
+	}
+
+	// Temp: CSS work-around.
+	.newspack-autocomplete-with-suggestions__label {
+		font-size: 11px;
+		font-weight: 500;
+		line-height: 1.4;
+		text-transform: uppercase;
+		display: block;
+		margin: 0 0 8px;
+		padding: 0;
+	}
+}

package/dist/esm/badge/index.js

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Badge component
+ */
+const Badge = ({
+  text,
+  level = 'default'
+}) => {
+  const classes = classnames('newspack-badge', `is-${level}`);
+  return /*#__PURE__*/_jsx("span", {
+    className: classes,
+    children: text
+  });
+};
+export default Badge;

package/dist/esm/badge/style.scss

@@ -0,0 +1,36 @@
+/**
+ * Badge
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../colors/colors.module" as colors;
+
+$badge-colors: (
+	"info": colors.$primary-600,
+	"warning": wp-colors.$alert-yellow,
+	"error": wp-colors.$alert-red,
+	"success": wp-colors.$alert-green,
+);
+
+.newspack-badge {
+	background-color: color-mix(in srgb, wp-colors.$white 90%, var(--base-color));
+	border-radius: 2px;
+	color: color-mix(in srgb, wp-colors.$black 50%, var(--base-color));
+	display: block;
+	flex: 0 0 auto;
+	font-size: 12px;
+	line-height: 1.5;
+	padding: 1px 4px;
+
+	&:where(.is-default) {
+		background-color: wp-colors.$gray-100;
+		color: wp-colors.$gray-800;
+	}
+
+	// Generate color variants
+	@each $type, $color in $badge-colors {
+		&.is-#{$type} {
+			--base-color: #{$color};
+		}
+	}
+}

package/dist/esm/button/index.js

@@ -19,6 +19,7 @@ const {
 } = Router;
 const Button = ({
   href,
+  loading = undefined,
   onClick,
   ...otherProps
 }) => {
@@ -42,6 +43,7 @@ const Button = ({
   }
   // @ts-expect-error - @wordpress/components' Button can only have either href or onClick, not both.
   return /*#__PURE__*/_jsx(BaseComponent, {
+    loading: loading ? true : undefined,
     ...otherProps
   });
 };

package/dist/esm/card/core-card.js

@@ -0,0 +1,133 @@
+/**
+ * Card using WP Core's Card component.
+ * https://wordpress.github.io/gutenberg/?path=/docs/components-card--docs
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, Card as CardWrapper, CardHeader, CardFooter, DropdownMenu, MenuItem, ToggleControl } from '@wordpress/components';
+import { Icon, chevronDown, chevronRight, chevronUp, dragHandle, moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import './style-core.scss';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CoreCard = ({
+  actions,
+  actionType,
+  as,
+  buttonsCard,
+  className,
+  footer,
+  header,
+  icon,
+  iconBackgroundColor,
+  isActive,
+  isDraggable,
+  isFirstTarget,
+  isLastTarget,
+  isNarrow,
+  isSmall,
+  dragIndex,
+  onDragCallback = () => {},
+  onHeaderClick,
+  noBorder,
+  noMargin,
+  children = null,
+  ...otherProps
+}) => {
+  const classes = classNames('newspack-card--core', className, (buttonsCard || as === 'a') && 'newspack-card--core__buttons-card', isDraggable && 'newspack-card--core__is-draggable', isNarrow && 'newspack-card--core__is-narrow', isSmall && 'newspack-card--core__is-small', icon && 'newspack-card--core__has-icon', iconBackgroundColor && 'newspack-card--core__has-icon-background-color', isActive && 'newspack-card--core__is-active', children && 'newspack-card--core__has-children', noMargin && 'newspack-card--core__no-margin');
+  let sizeProps = isSmall ? 'small' : otherProps.size;
+  if (buttonsCard || as === 'a') {
+    if (!isSmall) {
+      sizeProps = 'large';
+    }
+    if (as !== 'a') {
+      otherProps.as = 'a'; // Render as an anchor tag.
+    }
+  }
+  if (noBorder) {
+    otherProps.isBorderless = true;
+  }
+  return /*#__PURE__*/_jsxs(CardWrapper, {
+    as: as,
+    className: classes,
+    ...otherProps,
+    children: [(header || icon) && /*#__PURE__*/_jsxs(CardHeader, {
+      as: onHeaderClick ? 'button' : undefined,
+      className: classNames('newspack-card--core__header', isDraggable && 'newspack-card--core__header--is-draggable'),
+      size: sizeProps,
+      onClick: onHeaderClick,
+      children: [isDraggable && /*#__PURE__*/_jsxs("div", {
+        className: "newspack-card--core__header__draggable-controls",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "newspack-card--core__header__draggable-controls__drag-handle",
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: dragHandle
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "newspack-card--core__header__draggable-controls__move-buttons",
+          children: [/*#__PURE__*/_jsx(Button, {
+            icon: chevronUp,
+            onClick: () => onDragCallback(dragIndex, dragIndex - 1),
+            disabled: isFirstTarget,
+            label: __('Move one position up', 'newspack-plugin'),
+            size: "small"
+          }), /*#__PURE__*/_jsx(Button, {
+            icon: chevronDown,
+            onClick: () => onDragCallback(dragIndex, dragIndex + 1),
+            disabled: isLastTarget,
+            label: __('Move one position down', 'newspack-plugin'),
+            size: "small"
+          })]
+        })]
+      }), icon && /*#__PURE__*/_jsx("div", {
+        className: "newspack-card--core__icon",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: icon,
+          height: isSmall ? 24 : 48,
+          width: isSmall ? 24 : 48
+        })
+      }), header && /*#__PURE__*/_jsx("div", {
+        className: "newspack-card--core__header-content",
+        children: header
+      }), !actions?.length > 0 && actionType === 'chevron' && /*#__PURE__*/_jsx(Icon, {
+        className: "newspack-card--core__action",
+        icon: chevronRight,
+        height: 24,
+        width: 24
+      }), !actions?.length > 0 && actionType === 'toggle' && /*#__PURE__*/_jsx(ToggleControl, {
+        className: "newspack-card--core__action",
+        label: otherProps.title,
+        hideLabelFromVision: true,
+        checked: isActive,
+        onChange: () => {}
+      }), actions?.length > 0 && /*#__PURE__*/_jsx(DropdownMenu, {
+        icon: moreVertical,
+        label: __('More', 'newspack-plugin'),
+        children: () => actions.map((action, index) => /*#__PURE__*/_jsx(MenuItem, {
+          icon: action.icon,
+          onClick: action.action,
+          disabled: action.disabled || false,
+          isDestructive: action.destructive || false,
+          children: action.label
+        }, index))
+      })]
+    }), children && /*#__PURE__*/_jsx("div", {
+      className: "newspack-card--core__body",
+      children: children
+    }), footer && /*#__PURE__*/_jsx(CardFooter, {
+      size: sizeProps,
+      children: footer
+    })]
+  });
+};
+export default CoreCard;

package/dist/esm/card/index.js

@@ -10,6 +10,7 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import CoreCard from './core-card';
 import './style.scss';
 
 /**
@@ -31,8 +32,40 @@ class Card extends Component {
       isSmall,
       isWhite,
       noBorder,
+      // Pass as `true` to render using WP Core's Card component: https://wordpress.github.io/gutenberg/?path=/docs/components-card--docs
+      __experimentalCoreCard,
+      // Pass props supported by WP Core's Card component in this single prop.
+      __experimentalCoreProps = {
+        actionType: null,
+        // chevron | toggle | button | link | none
+        header: null,
+        // Pass a React component to render in a CardHeader component.
+        icon: null,
+        footer: null,
+        // Pass a React component to render in a CardFooter component.
+        noMargin: false,
+        isDraggable: false,
+        dragIndex: null,
+        onDragCallback: () => {}
+      },
       ...otherProps
     } = this.props;
+    if (__experimentalCoreCard) {
+      const props = {
+        buttonsCard,
+        className,
+        isMedium,
+        isNarrow,
+        isSmall,
+        isWhite,
+        noBorder,
+        ...otherProps,
+        ...__experimentalCoreProps
+      };
+      return /*#__PURE__*/_jsx(CoreCard, {
+        ...props
+      });
+    }
     const classes = classNames('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 /*#__PURE__*/_jsx("div", {
       className: classes,