newspack-components 2.1.0 → 2.2.0

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

@@ -7,18 +7,17 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { useEffect, useState } from '@wordpress/element';
 import { __ as alias__, _x as alias_x, sprintf } from '@wordpress/i18n';
 const __ = alias__,
-      _x = alias_x;
+  _x = alias_x;
 import { addQueryArgs } from '@wordpress/url';
+
 /**
  * External dependencies.
  */
-
 import { AutocompleteTokenField } from '../';
 import './style.scss';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-
 const AutocompleteWithSuggestions = _ref => {
   let {
     fetchSavedPosts = false,
@@ -51,7 +50,6 @@ const AutocompleteWithSuggestions = _ref => {
     selectedPost = 0,
     // Legacy prop when single-select was the only option.
     suggestionsToFetch = 10 // Number of suggestions to fetch per query.
-
   } = _ref;
   const [isLoading, setIsLoading] = useState(true);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
@@ -59,20 +57,17 @@ const AutocompleteWithSuggestions = _ref => {
   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) {
@@ -80,10 +75,10 @@ const AutocompleteWithSuggestions = _ref => {
       }
     }).finally(() => setIsLoading(false));
   }, [postTypeToSearch]);
+
   /**
    * Fetch more suggestions.
    */
-
   useEffect(() => {
     if (isLoadingMore) {
       handleFetchSuggestions(null, suggestions.length, postTypeToSearch).then(_suggestions => {
@@ -93,17 +88,16 @@ const AutocompleteWithSuggestions = _ref => {
       }).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 function () {
     let postIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let searchSlug = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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,
@@ -116,10 +110,10 @@ const AutocompleteWithSuggestions = _ref => {
       label: decodeEntities(post.title) || __('(no title)', 'newspack')
     }));
   };
+
   /**
    * If passed a `fetchSuggestions` prop, use that, otherwise, build it based on the selected post type.
    */
-
   const handleFetchSuggestions = fetchSuggestions ? fetchSuggestions : async function () {
     let search = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     let offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -127,7 +121,6 @@ const AutocompleteWithSuggestions = _ref => {
     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, {
@@ -139,8 +132,9 @@ const AutocompleteWithSuggestions = _ref => {
     });
     const total = parseInt(response.headers.get('x-wp-total') || 0);
     const posts = await response.json();
-    setMaxSuggestions(total); // Format suggestions for FormTokenField display.
+    setMaxSuggestions(total);
 
+    // Format suggestions for FormTokenField display.
     return posts.reduce((acc, post) => {
       acc.push({
         value: parseInt(post.id),
@@ -149,22 +143,22 @@ const AutocompleteWithSuggestions = _ref => {
       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.
+    // 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);
@@ -172,23 +166,25 @@ const AutocompleteWithSuggestions = _ref => {
         // Otherwise, add it.
         selections.push(_selection);
       }
-    }); // Include currently selected post type in selection results.
-
+    });
 
-    onChange(selections.map(selection => ({ ...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'), selections.length, selections.length > 1 ? postTypeLabelPlural : postTypeLabel) : // Translators: %s: The label for the selection.
+    const selectedMessage = multiSelect ? sprintf(
+    // Translators: %1: the length of selections. %2: the selection leabel.
+    __('%1$s %2$s selected', 'newspack'), selections.length, selections.length > 1 ? postTypeLabelPlural : postTypeLabel) :
+    // Translators: %s: The label for the selection.
     sprintf(__('Selected %s', 'newspack'), postTypeLabel);
     return _jsxs("div", {
       className: "newspack-autocomplete-with-suggestions__selected-items",
@@ -208,14 +204,14 @@ const AutocompleteWithSuggestions = _ref => {
       }, selection.value))]
     });
   };
+
   /**
    * Render post type select dropdown.
    */
-
-
   const renderPostTypeSelect = () => {
     return _jsx(SelectControl, {
-      label: sprintf( // Translators: %s: The name of the type.
+      label: sprintf(
+      // Translators: %s: The name of the type.
       __('%s type', 'newspack'), postTypeLabel.charAt(0).toUpperCase() + postTypeLabel.slice(1)),
       value: postTypeToSearch,
       options: postTypes.map(postTypeOption => ({
@@ -225,13 +221,12 @@ const AutocompleteWithSuggestions = _ref => {
       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];
@@ -242,18 +237,16 @@ const AutocompleteWithSuggestions = _ref => {
         label: suggestion.label
       }, suggestion.value);
     }
-
     return _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 (isLoading) {
       return _jsx("div", {
@@ -261,18 +254,14 @@ const AutocompleteWithSuggestions = _ref => {
         children: _jsx(Spinner, {})
       });
     }
-
     if (0 === suggestions.length) {
       return null;
     }
-
     const className = multiSelect ? 'newspack-autocomplete-with-suggestions__search-suggestions-multiselect' : 'newspack-autocomplete-with-suggestions__search-suggestions';
     return _jsxs(_Fragment, {
       children: [!hideHelp && _jsx("p", {
         className: "newspack-autocomplete-with-suggestions__label",
-        children:
-        /* Translators: %s: the name of a post type. */
-        sprintf(__('Or, select a recent %s:', 'newspack'), postTypeLabel)
+        children: /* Translators: %s: the name of a post type. */sprintf(__('Or, select a recent %s:', 'newspack'), postTypeLabel)
       }), _jsxs("div", {
         className: className,
         children: [suggestions.map(renderSuggestion), suggestions.length < (maxItemsToSuggest || maxSuggestions) && _jsx(Button, {
@@ -284,7 +273,6 @@ const AutocompleteWithSuggestions = _ref => {
       })]
     });
   };
-
   return _jsxs("div", {
     className: classNames.join(' '),
     children: [0 < selectedItems.length && renderSelections(), 1 < postTypes.length && renderPostTypeSelect(), _jsx(AutocompleteTokenField, {
@@ -298,5 +286,4 @@ const AutocompleteWithSuggestions = _ref => {
     }), renderSuggestions()]
   });
 };
-
 export default AutocompleteWithSuggestions;

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

@@ -2,7 +2,7 @@
 * Styles for AutocompleteWithSuggestions component.
 */
 
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-autocomplete-with-suggestions {
 	width: 100%;
@@ -27,19 +27,19 @@
 	}
 
 	.components-input-control__backdrop {
-		border-color: $gray-700 !important;
+		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: $gray-900 !important;
+		color: wp-colors.$gray-900 !important;
 	}
 
 	&__suggestions-spinner {
-		background: $gray-100;
-		border: 1px solid $gray-700;
+		background: wp-colors.$gray-100;
+		border: 1px solid wp-colors.$gray-700;
 		border-radius: 2px;
 		cursor: progress;
 		margin: 16px 0;
@@ -56,15 +56,16 @@
 
 	.newspack-autocomplete-tokenfield__help {
 		font-size: inherit;
+		margin-bottom: 8px !important;
 	}
 
 	.components-form-token-field {
 		&__input-container {
-			border-color: $gray-700;
+			border-color: wp-colors.$gray-700;
 		}
 
 		&__suggestions-list {
-			border-top-color: $gray-700;
+			border-top-color: wp-colors.$gray-700;
 			margin: 4px -4px -2px;
 		}
 
@@ -79,7 +80,7 @@
 	}
 
 	&__selected-items {
-		border-bottom: 1px solid $gray-700;
+		border-bottom: 1px solid wp-colors.$gray-700;
 		display: flex;
 		flex-wrap: wrap;
 		gap: 8px;
@@ -93,9 +94,9 @@
 	}
 
 	&__selected-item-button.components-button.is-tertiary {
-		background-color: $gray-300;
+		background-color: wp-colors.$gray-300;
 		border-radius: 2px;
-		color: $gray-900;
+		color: wp-colors.$gray-900;
 		font-size: 13px;
 		height: auto;
 		margin: 0;
@@ -116,7 +117,7 @@
 	&__search-suggestions,
 	&__search-suggestions-multiselect {
 		border-radius: 2px;
-		border: 1px solid $gray-700;
+		border: 1px solid wp-colors.$gray-700;
 		max-height: 178px;
 		overflow-x: visible;
 		overflow-y: auto;
@@ -128,14 +129,14 @@
 			margin: auto;
 
 			&.is-link {
-				color: $gray-900;
+				color: wp-colors.$gray-900;
 				padding: 8px;
 				text-decoration: none;
 				width: 100%;
 
 				&:active:not( :disabled ),
 				&:hover:not( :disabled ) {
-					background: $gray-900;
+					background: wp-colors.$gray-900;
 					background: var( --wp-admin-theme-color );
 					color: white;
 				}
@@ -150,7 +151,7 @@
 
 	&__search-suggestions {
 		border-radius: 2px;
-		border: 1px solid $gray-700;
+		border: 1px solid wp-colors.$gray-700;
 		padding: 0;
 
 		.components-button {
@@ -158,7 +159,7 @@
 
 			&:focus:not( :disabled ) {
 				border-radius: 0;
-				box-shadow: inset 0 0 0 1.5px $gray-900;
+				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 );
 			}
 

package/dist/esm/button/index.js

@@ -7,17 +7,16 @@
  */
 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 "@emotion/react/jsx-runtime";
 const {
   useHistory
 } = Router;
-
 const Button = _ref => {
   let {
     href,
@@ -25,8 +24,9 @@ const Button = _ref => {
     ...otherProps
   } = _ref;
   const history = useHistory();
-  const [isAwaitingOnClick, setIsAwaitingOnClick] = useState(false); // If both onClick and href are present, await the onClick action an then redirect.
+  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);
@@ -38,13 +38,11 @@ const Button = _ref => {
     otherProps.href = href;
     otherProps.onClick = onClick;
   }
-
   if (isAwaitingOnClick) {
     otherProps.disabled = true;
   }
-
-  return _jsx(BaseComponent, { ...otherProps
+  return _jsx(BaseComponent, {
+    ...otherProps
   });
 };
-
 export default Button;

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

@@ -7,20 +7,19 @@
  */
 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 } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 class ButtonCard extends Component {
   /**
    * Render
@@ -62,7 +61,5 @@ class ButtonCard extends Component {
       })]
     });
   }
-
 }
-
 export default ButtonCard;

package/dist/esm/button-card/style.scss

@@ -2,12 +2,12 @@
  * Button Card
  */
 
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-button-card {
 	background: white;
 	border-radius: 2px;
-	border: 1px solid $gray-300;
+	border: 1px solid wp-colors.$gray-300;
 	box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) transparent;
 	cursor: pointer;
 	display: block;
@@ -51,11 +51,11 @@
 	}
 
 	.newspack-grid h3 {
-		color: $gray-900;
+		color: wp-colors.$gray-900;
 	}
 
 	p {
-		color: $gray-700;
+		color: wp-colors.$gray-700;
 	}
 
 	// Grouped
@@ -90,7 +90,7 @@
 		&:active,
 		&:hover {
 			svg {
-				fill: currentColor;
+				fill: currentcolor;
 			}
 		}
 
@@ -144,31 +144,31 @@
 
 	&.is-destructive {
 		.title {
-			color: $alert-red;
+			color: wp-colors.$alert-red;
 		}
 
 		&.has-chevron,
 		&.has-icon {
 			svg {
-				fill: $alert-red;
+				fill: wp-colors.$alert-red;
 			}
 		}
 
 		&:focus,
 		&.is-pressed {
-			border-color: $alert-red;
-			box-shadow: inset 0 0 0 1px $alert-red !important;
+			border-color: wp-colors.$alert-red;
+			box-shadow: inset 0 0 0 1px wp-colors.$alert-red !important;
 		}
 
 		&.is-pressed:focus-visible {
-			box-shadow: inset 0 0 0 1px $alert-red, 0 0 0 1px white,
-				0 0 0 var( --wp-admin-border-width-focus ) $alert-red !important;
+			box-shadow: inset 0 0 0 1px wp-colors.$alert-red, 0 0 0 1px white,
+				0 0 0 var( --wp-admin-border-width-focus ) wp-colors.$alert-red !important;
 		}
 
 		&:active,
 		&:hover {
-			background-color: $gray-100;
-			border-color: $alert-red;
+			background-color: wp-colors.$gray-100;
+			border-color: wp-colors.$alert-red;
 		}
 	}
 }

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

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies.
+ */
+import { Component } from '@wordpress/element';
+import { ButtonGroup as BaseComponent } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+
+import './style.scss';
+/**
+ * External dependencies
+ */
+
+import classnames from 'classnames';
+/**
+ * Button Group.
+ */
+
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+
+class ButtonGroup extends Component {
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      className,
+      noMargin,
+      ...otherProps
+    } = this.props;
+    const classes = classnames('newspack-button-group', {
+      'newspack-button-group--no-margin': noMargin
+    }, className);
+    return _jsx(BaseComponent, {
+      className: classes,
+      ...otherProps
+    });
+  }
+
+}
+
+export default ButtonGroup;

package/dist/esm/button-group/style.scss

@@ -0,0 +1,73 @@
+/**
+ * Button Group
+ */
+
+@import '../../../shared/scss/colors';
+@import '~@wordpress/base-styles/colors';
+
+.newspack-button-group {
+	display: block;
+	&:not( .newspack-button-group--no-margin ) {
+		margin: 32px 0;
+	}
+
+	.newspack-button {
+		padding: 11px 17px !important;
+		&:active,
+		&:focus,
+		&:hover,
+		&.is-pressed {
+			position: relative;
+		}
+
+		&.is-pressed {
+			position: relative;
+			z-index: 2;
+			background-color: white !important;
+			color: $gray-900 !important;
+			border: none !important;
+			&:focus {
+				box-shadow: 0 0 0 1px white, 0 0 0 2px $primary-500 !important;
+			}
+			&:active,
+			&:hover {
+				background: $gray-100 !important;
+				color: $primary-500 !important;
+			}
+			&::after {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: calc( 100% - 6px );
+				height: calc( 100% - 6px );
+				border: 3px solid $primary-500;
+			}
+		}
+	}
+}
+
+body[class*='admin-color-'] {
+	.newspack-button-group {
+		.newspack-button {
+			border-radius: 0;
+			box-shadow: none;
+
+			&:first-child {
+				&,
+				&::after {
+					border-bottom-left-radius: 3px;
+					border-top-left-radius: 3px;
+				}
+			}
+
+			&:last-child {
+				&,
+				&::after {
+					border-bottom-right-radius: 3px;
+					border-top-right-radius: 3px;
+				}
+			}
+		}
+	}
+}

package/dist/esm/card/index.js

@@ -6,18 +6,17 @@
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
-
 import './style.scss';
+
 /**
  * External dependencies
  */
-
 import classNames from 'classnames';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 class Card extends Component {
   /**
    * Render
@@ -40,7 +39,5 @@ class Card extends Component {
       ...otherProps
     });
   }
-
 }
-
 export default Card;