newspack-components 2.1.0 → 2.2.1

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

@@ -1,36 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 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");
-
 var _ = require("../");
-
 require("./style.scss");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * WordPress dependencies
  */
 const __ = _i18n.__,
-      _x = _i18n._x;
-
+  _x = _i18n._x;
+/**
+ * External dependencies.
+ */
 const AutocompleteWithSuggestions = _ref => {
   let {
     fetchSavedPosts = false,
@@ -63,7 +54,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] = (0, _element.useState)(true);
   const [isLoadingMore, setIsLoadingMore] = (0, _element.useState)(false);
@@ -71,20 +61,17 @@ const AutocompleteWithSuggestions = _ref => {
   const [maxSuggestions, setMaxSuggestions] = (0, _element.useState)(0);
   const [postTypeToSearch, setPostTypeToSearch] = (0, _element.useState)(postTypes[0].slug);
   const classNames = ['newspack-autocomplete-with-suggestions'];
-
   if (hideHelp) {
     classNames.push('hide-help');
   }
+
   /**
    * Fetch recent posts to show as suggestions.
    */
-
-
   (0, _element.useEffect)(() => {
     if (onPostTypeChange) {
       onPostTypeChange(postTypeToSearch);
     }
-
     setIsLoading(true);
     handleFetchSuggestions(null, 0, postTypeToSearch).then(_suggestions => {
       if (0 < _suggestions.length) {
@@ -92,10 +79,10 @@ const AutocompleteWithSuggestions = _ref => {
       }
     }).finally(() => setIsLoading(false));
   }, [postTypeToSearch]);
+
   /**
    * Fetch more suggestions.
    */
-
   (0, _element.useEffect)(() => {
     if (isLoadingMore) {
       handleFetchSuggestions(null, suggestions.length, postTypeToSearch).then(_suggestions => {
@@ -105,17 +92,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 (0, _apiFetch.default)({
       path: (0, _url.addQueryArgs)('/wp/v2/' + endpoint, {
         per_page: 100,
@@ -128,10 +114,10 @@ const AutocompleteWithSuggestions = _ref => {
       label: (0, _htmlEntities.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;
@@ -139,7 +125,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 (0, _apiFetch.default)({
       parse: false,
       path: (0, _url.addQueryArgs)('/wp/v2/' + endpoint, {
@@ -151,8 +136,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),
@@ -161,22 +147,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);
@@ -184,23 +170,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 ? (0, _i18n.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 ? (0, _i18n.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.
     (0, _i18n.sprintf)(__('Selected %s', 'newspack'), postTypeLabel);
     return (0, _jsxRuntime.jsxs)("div", {
       className: "newspack-autocomplete-with-suggestions__selected-items",
@@ -220,14 +208,14 @@ const AutocompleteWithSuggestions = _ref => {
       }, selection.value))]
     });
   };
+
   /**
    * Render post type select dropdown.
    */
-
-
   const renderPostTypeSelect = () => {
     return (0, _jsxRuntime.jsx)(_components.SelectControl, {
-      label: (0, _i18n.sprintf)( // Translators: %s: The name of the type.
+      label: (0, _i18n.sprintf)(
+      // Translators: %s: The name of the type.
       __('%s type', 'newspack'), postTypeLabel.charAt(0).toUpperCase() + postTypeLabel.slice(1)),
       value: postTypeToSearch,
       options: postTypes.map(postTypeOption => ({
@@ -237,13 +225,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];
@@ -254,18 +241,16 @@ const AutocompleteWithSuggestions = _ref => {
         label: suggestion.label
       }, suggestion.value);
     }
-
     return (0, _jsxRuntime.jsx)(_components.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 (0, _jsxRuntime.jsx)("div", {
@@ -273,18 +258,14 @@ const AutocompleteWithSuggestions = _ref => {
         children: (0, _jsxRuntime.jsx)(_components.Spinner, {})
       });
     }
-
     if (0 === suggestions.length) {
       return null;
     }
-
     const className = multiSelect ? 'newspack-autocomplete-with-suggestions__search-suggestions-multiselect' : 'newspack-autocomplete-with-suggestions__search-suggestions';
     return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [!hideHelp && (0, _jsxRuntime.jsx)("p", {
         className: "newspack-autocomplete-with-suggestions__label",
-        children:
-        /* Translators: %s: the name of a post type. */
-        (0, _i18n.sprintf)(__('Or, select a recent %s:', 'newspack'), postTypeLabel)
+        children: /* Translators: %s: the name of a post type. */(0, _i18n.sprintf)(__('Or, select a recent %s:', 'newspack'), postTypeLabel)
       }), (0, _jsxRuntime.jsxs)("div", {
         className: className,
         children: [suggestions.map(renderSuggestion), suggestions.length < (maxItemsToSuggest || maxSuggestions) && (0, _jsxRuntime.jsx)(_components.Button, {
@@ -296,7 +277,6 @@ const AutocompleteWithSuggestions = _ref => {
       })]
     });
   };
-
   return (0, _jsxRuntime.jsxs)("div", {
     className: classNames.join(' '),
     children: [0 < selectedItems.length && renderSelections(), 1 < postTypes.length && renderPostTypeSelect(), (0, _jsxRuntime.jsx)(_.AutocompleteTokenField, {
@@ -310,6 +290,5 @@ const AutocompleteWithSuggestions = _ref => {
     }), renderSuggestions()]
   });
 };
-
 var _default = AutocompleteWithSuggestions;
 exports.default = _default;

package/dist/cjs/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/cjs/button/index.js

@@ -1,22 +1,15 @@
 "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 _router = _interopRequireDefault(require("../proxied-imports/router"));
-
 require("./style.scss");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Button
  */
@@ -28,10 +21,10 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * Internal dependencies
  */
+
 const {
   useHistory
 } = _router.default;
-
 const Button = _ref => {
   let {
     href,
@@ -39,8 +32,9 @@ const Button = _ref => {
     ...otherProps
   } = _ref;
   const history = useHistory();
-  const [isAwaitingOnClick, setIsAwaitingOnClick] = (0, _element.useState)(false); // If both onClick and href are present, await the onClick action an then redirect.
+  const [isAwaitingOnClick, setIsAwaitingOnClick] = (0, _element.useState)(false);
 
+  // If both onClick and href are present, await the onClick action an then redirect.
   if (href && onClick) {
     otherProps.onClick = async () => {
       setIsAwaitingOnClick(true);
@@ -52,14 +46,12 @@ const Button = _ref => {
     otherProps.href = href;
     otherProps.onClick = onClick;
   }
-
   if (isAwaitingOnClick) {
     otherProps.disabled = true;
   }
-
-  return (0, _jsxRuntime.jsx)(_components.Button, { ...otherProps
+  return (0, _jsxRuntime.jsx)(_components.Button, {
+    ...otherProps
   });
 };
-
 var _default = Button;
 exports.default = _default;

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

@@ -1,24 +1,16 @@
 "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");
-
 var _icons = require("@wordpress/icons");
-
 var _ = require("../");
-
 require("./style.scss");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Button Card
  */
@@ -34,6 +26,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * External dependencies
  */
+
 class ButtonCard extends _element.Component {
   /**
    * Render
@@ -75,8 +68,6 @@ class ButtonCard extends _element.Component {
       })]
     });
   }
-
 }
-
 var _default = ButtonCard;
 exports.default = _default;

package/dist/cjs/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/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
@@ -52,8 +47,6 @@ class Card extends _element.Component {
       ...otherProps
     });
   }
-
 }
-
 var _default = Card;
 exports.default = _default;

package/dist/cjs/card/style.scss

@@ -2,12 +2,12 @@
  * Card
  */
 
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-card {
 	border-radius: 2px;
-	border: 1px solid $gray-300;
-	color: $gray-900;
+	border: 1px solid wp-colors.$gray-300;
+	color: wp-colors.$gray-900;
 	margin: 32px 0;
 	padding: 16px 48px;
 
@@ -30,6 +30,7 @@
 		align-items: center;
 		display: flex;
 		flex-wrap: wrap;
+		gap: 8px;
 		justify-content: space-between;
 		margin-bottom: -16px;
 
@@ -37,6 +38,12 @@
 			margin-bottom: 0 !important;
 			margin-top: 0 !important;
 		}
+
+		.newspack-select-control {
+			.components-base-control__field {
+				margin-bottom: 0;
+			}
+		}
 	}
 
 	// Is Narrow
@@ -101,6 +108,16 @@
 		padding: 0;
 	}
 
+	// Margin
+
+	&.mt64 {
+		margin-top: 64px;
+	}
+
+	&.mt16 {
+		margin-top: 16px;
+	}
+
 	// Typography
 
 	small {
@@ -109,15 +126,15 @@
 	}
 
 	code {
-		background: $gray-100;
-		color: $gray-900;
+		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;
@@ -130,7 +147,7 @@
 	// Separator
 
 	.sep {
-		background: $gray-300;
+		background: wp-colors.$gray-300;
 		height: 1px;
 		margin-left: 8px;
 		margin-right: 8px;
@@ -146,6 +163,6 @@
 	// Error
 
 	.newspack-error {
-		color: $alert-red;
+		color: wp-colors.$alert-red;
 	}
 }