newspack-components 3.0.0-alpha.2 → 3.0.0-alpha.4

package/dist/esm/autocomplete-tokenfield/style.scss

@@ -0,0 +1,49 @@
+/**
+ * Autocomplete Token Field
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-autocomplete-tokenfield {
+	.components-spinner {
+		margin: 0;
+		position: absolute;
+		right: 8px;
+		top: 8px;
+	}
+
+	&__input-container {
+		position: relative;
+
+		&.has-label .components-spinner {
+			top: 32px;
+		}
+	}
+
+	/* Workaround for hard-coded help text in FormTokenField. */
+	.components-form-token-field {
+		> .components-form-token-field__help {
+			display: none;
+		}
+
+		> .components-form-token-field__token-text {
+			align-items: center;
+			display: flex;
+		}
+	}
+
+	.newspack-autocomplete-tokenfield__help {
+		color: wp-colors.$gray-700;
+		font-size: inherit;
+		margin-top: 0;
+	}
+
+	.components-form-token-field__suggestions-list {
+		margin-left: 0;
+		padding-left: 0;
+	}
+
+	.components-button:focus:not(:disabled) {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
+}

package/dist/esm/autocomplete-with-suggestions/index.js

@@ -0,0 +1,274 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { Button, CheckboxControl, SelectControl } from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useEffect, useState } from '@wordpress/element';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * External dependencies.
+ */
+import { AutocompleteTokenField } from '../';
+import './style.scss';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const AutocompleteWithSuggestions = ({
+  fetchSavedPosts = false,
+  // If passed, will use this function to fetch saved data.
+  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 = false,
+  // If true, all help text will be hidden.
+  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.
+  onPostTypeChange = false,
+  // Funciton to call when the post type selector is changed.
+  postTypes = [{
+    slug: 'post',
+    label: 'Post'
+  }],
+  // If passed, will render a selector to change the post type queried for suggestions.
+  postTypeLabel = __('item', 'newspack-plugin'),
+  // String to describe the data being shown.
+  postTypeLabelPlural = __('items', 'newspack-plugin'),
+  // Plural string to describe the data being shown.
+  selectedItems = [],
+  // Array of saved items.
+  selectedPost = 0,
+  // Legacy prop when single-select was the only option.
+  suggestionsToFetch = 10 // 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 [postTypeToSearch, setPostTypeToSearch] = useState(postTypes[0].slug);
+  const classNames = ['newspack-autocomplete-with-suggestions'];
+  if (hideHelp) {
+    classNames.push('hide-help');
+  }
+
+  /**
+   * Fetch recent posts to show as suggestions.
+   */
+  useEffect(() => {
+    if (onPostTypeChange) {
+      onPostTypeChange(postTypeToSearch);
+    }
+    setIsLoading(true);
+    handleFetchSuggestions(null, 0, postTypeToSearch).then(_suggestions => {
+      if (0 < _suggestions.length) {
+        setSuggestions(_suggestions);
+      }
+    }).finally(() => setIsLoading(false));
+  }, [postTypeToSearch]);
+
+  /**
+   * 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 `fetchSavedPosts` prop, use that, otherwise, build it based on the selected post type.
+   */
+  const handleFetchSaved = fetchSavedPosts ? fetchSavedPosts : async (postIds = [], 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 posts = await apiFetch({
+      path: addQueryArgs('/wp/v2/' + endpoint, {
+        per_page: 100,
+        include: postIds.join(','),
+        _fields: 'id,title'
+      })
+    });
+    return posts.map(post => ({
+      value: parseInt(post.id),
+      label: decodeEntities(post.title) || __('(no title)', 'newspack-plugin')
+    }));
+  };
+
+  /**
+   * 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;
+    }, []);
+  };
+
+  /**
+   * Intercept onChange callback so we can decide whether to allow multiple selections.
+   */
+  const handleOnChange = _selections => {
+    // If only allowing one selection, just return the one selected item.
+    if (!multiSelect) {
+      return onChange(_selections);
+    }
+
+    // Handle legacy `selectedPost` prop.
+    const selections = selectedPost ? [...selectedItems, selectedPost] : [...selectedItems];
+
+    // Loop through new selections to determine whether to add or remove them.
+    _selections.forEach(_selection => {
+      const existingSelection = selections.findIndex(selection => parseInt(selection.value) === parseInt(_selection.value));
+      if (-1 < existingSelection) {
+        // If the selection is already selected, remove it.
+        selections.splice(existingSelection, 1);
+      } else {
+        // Otherwise, add it.
+        selections.push(_selection);
+      }
+    });
+
+    // Include currently selected post type in selection results.
+    onChange(selections.map(selection => ({
+      ...selection,
+      postType: postTypeToSearch
+    })));
+  };
+
+  /**
+   * Render selected item(s) for this component. Clicking on a selection deselects it.
+   */
+  const renderSelections = () => {
+    // Handle legacy `selectedPost` prop.
+    const selections = selectedPost ? [...selectedItems, selectedPost] : selectedItems;
+    const selectedMessage = multiSelect ? sprintf(
+    // Translators: %1: the length of selections. %2: the selection leabel.
+    __('%1$s %2$s selected', 'newspack-plugin'), selections.length, selections.length > 1 ? postTypeLabelPlural : postTypeLabel) : sprintf(
+    // Translators: %s: The label for the selection.
+    __('Selected %s', 'newspack-plugin'), postTypeLabel);
+    return /*#__PURE__*/_jsxs("div", {
+      className: "newspack-autocomplete-with-suggestions__selected-items",
+      children: [/*#__PURE__*/_jsxs("p", {
+        className: "newspack-autocomplete-with-suggestions__label",
+        children: [selectedMessage, 1 < selections.length && _x(' – ', 'separator character', 'newspack-plugin'), 1 < selections.length && /*#__PURE__*/_jsx(Button, {
+          onClick: () => onChange([]),
+          isLink: true,
+          isDestructive: true,
+          children: __('Clear all', 'newspack-plugin')
+        })]
+      }), selections.map(selection => /*#__PURE__*/_jsx(Button, {
+        className: "newspack-autocomplete-with-suggestions__selected-item-button",
+        isTertiary: true,
+        onClick: () => onChange(selections.filter(_selection => _selection.value !== selection.value)),
+        children: selection.label
+      }, selection.value))]
+    });
+  };
+
+  /**
+   * Render post type select dropdown.
+   */
+  const renderPostTypeSelect = () => {
+    return /*#__PURE__*/_jsx(SelectControl, {
+      label: sprintf(
+      // Translators: %s: The name of the type.
+      __('%s type', 'newspack-plugin'), postTypeLabel.charAt(0).toUpperCase() + postTypeLabel.slice(1)),
+      value: postTypeToSearch,
+      options: postTypes.map(postTypeOption => ({
+        label: postTypeOption.label,
+        value: postTypeOption.slug
+      })),
+      onChange: _postType => setPostTypeToSearch(_postType)
+    });
+  };
+
+  /**
+   * 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 selections = selectedPost ? [...selectedItems, selectedPost] : [...selectedItems];
+      const isSelected = !!selections.find(_selection => parseInt(_selection.value) === parseInt(suggestion.value) && _selection.label === suggestion.label);
+      return /*#__PURE__*/_jsx(CheckboxControl, {
+        checked: isSelected,
+        onChange: () => handleOnChange([suggestion]),
+        label: suggestion.label
+      }, suggestion.value);
+    }
+    return /*#__PURE__*/_jsx(Button, {
+      isLink: true,
+      onClick: () => handleOnChange([suggestion]),
+      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-suggestions__search-suggestions-multiselect' : 'newspack-autocomplete-with-suggestions__search-suggestions';
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [!hideHelp && /*#__PURE__*/_jsx("p", {
+        className: "newspack-autocomplete-with-suggestions__label",
+        children: /* Translators: %s: the name of a post type. */sprintf(__('Or, select a recent %s:', 'newspack-plugin'), postTypeLabel)
+      }), /*#__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: [0 < selectedItems.length && renderSelections(), 1 < postTypes.length && renderPostTypeSelect(), /*#__PURE__*/_jsx(AutocompleteTokenField, {
+      tokens: [],
+      onChange: handleOnChange,
+      fetchSuggestions: async search => handleFetchSuggestions(search, 0, postTypeToSearch),
+      fetchSavedInfo: postIds => handleFetchSaved(postIds),
+      label: label,
+      loading: isLoading,
+      help: !hideHelp && help,
+      returnFullObjects: true
+    }), renderSuggestions()]
+  });
+};
+export default AutocompleteWithSuggestions;

package/dist/esm/autocomplete-with-suggestions/style.scss

@@ -0,0 +1,163 @@
+/**
+* Styles for AutocompleteWithSuggestions component.
+*/
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-autocomplete-with-suggestions {
+	width: 100%;
+
+	&.hide-help {
+		> .components-base-control,
+		> .newspack-autocomplete-tokenfield,
+		> .newspack-autocomplete-with-suggestions__search-suggestions,
+		> .newspack-autocomplete-with-suggestions__search-suggestions-multiselect {
+			margin-top: 16px;
+		}
+	}
+	.components-select-control__input {
+		max-width: none;
+	}
+
+	.components-input-control__backdrop {
+		border-color: wp-colors.$gray-700 !important;
+	}
+
+	.newspack-autocomplete-with-suggestions__label,
+	.components-form-token-field__label,
+	.components-input-control__label,
+	.components-checkbox-control__label {
+		color: wp-colors.$gray-900 !important;
+	}
+
+	&__suggestions-spinner {
+		background: wp-colors.$gray-100;
+		border: 1px solid wp-colors.$gray-700;
+		border-radius: 2px;
+		cursor: progress;
+		margin: 16px 0;
+		padding: 32px;
+
+		.components-spinner {
+			display: block;
+			margin: 0 auto;
+			position: relative;
+			right: auto;
+			top: 0;
+		}
+	}
+
+	.newspack-autocomplete-tokenfield__help {
+		font-size: inherit;
+		margin-bottom: 8px !important;
+	}
+
+	.components-form-token-field {
+		&__input-container {
+			border-color: wp-colors.$gray-700;
+		}
+
+		&__suggestions-list {
+			border-top-color: wp-colors.$gray-700;
+			margin: 4px -4px -2px;
+		}
+
+		&__suggestion {
+			padding: 8px;
+		}
+	}
+
+	p.newspack-autocomplete-with-suggestions__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-suggestions__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 {
+		border-radius: 2px;
+		border: 1px solid wp-colors.$gray-700;
+		max-height: 178px;
+		overflow: visible auto;
+		padding: 8px 8px 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);
+			}
+		}
+	}
+}

package/dist/esm/button/index.js

@@ -0,0 +1,48 @@
+/**
+ * Button
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { Button as BaseComponent } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Router from '../proxied-imports/router';
+import './style.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  useHistory
+} = Router;
+const Button = ({
+  href,
+  onClick,
+  ...otherProps
+}) => {
+  const history = useHistory();
+  const [isAwaitingOnClick, setIsAwaitingOnClick] = useState(false);
+
+  // If both onClick and href are present, await the onClick action an then redirect.
+  if (href && onClick) {
+    otherProps.onClick = async () => {
+      setIsAwaitingOnClick(true);
+      await onClick();
+      setIsAwaitingOnClick(false);
+      history.push((href || '').replace('#', ''));
+    };
+  } else {
+    otherProps.href = href;
+    otherProps.onClick = onClick;
+  }
+  if (isAwaitingOnClick) {
+    otherProps.disabled = true;
+  }
+  // @ts-ignore - @wordpress/components' Button can only have either href or onClick, not both.
+  return /*#__PURE__*/_jsx(BaseComponent, {
+    ...otherProps
+  });
+};
+export default Button;

package/dist/esm/button/style.scss

@@ -0,0 +1,11 @@
+/**
+ * Button
+ */
+
+.components-button {
+	&.is-destructive {
+		&:hover:not(:disabled) {
+			box-shadow: none;
+		}
+	}
+}

package/dist/esm/button-card/index.js

@@ -0,0 +1,64 @@
+/**
+ * Button Card
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { Icon, chevronRight } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { Grid } from '../';
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+class ButtonCard extends Component {
+  /**
+   * Render
+   */
+  render() {
+    const {
+      chevron,
+      className,
+      desc,
+      grouped,
+      icon,
+      isDestructive,
+      isPressed,
+      isSmall,
+      title,
+      ...otherProps
+    } = this.props;
+    const classes = classnames('newspack-button-card', className, chevron && 'has-chevron', grouped && 'grouped', icon && 'has-icon', isDestructive && 'is-destructive', isPressed && 'is-pressed', isSmall && 'is-small');
+    return /*#__PURE__*/_jsxs("a", {
+      className: classes,
+      ...otherProps,
+      children: [icon && /*#__PURE__*/_jsx(Icon, {
+        icon: icon,
+        height: 48,
+        width: 48
+      }), /*#__PURE__*/_jsxs(Grid, {
+        noMargin: true,
+        columns: 1,
+        gutter: 8,
+        children: [title && /*#__PURE__*/_jsx("h3", {
+          children: title
+        }), desc && /*#__PURE__*/_jsx("p", {
+          children: desc
+        })]
+      }), chevron && /*#__PURE__*/_jsx(Icon, {
+        icon: chevronRight,
+        height: 24,
+        width: 24
+      })]
+    });
+  }
+}
+export default ButtonCard;