newspack-components 3.1.0 → 4.0.0

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

@@ -9,8 +9,7 @@
 	padding: 0;
 	border-color: wp-colors.$gray-300;
 
-	// Clickable
-
+	/* Clickable */
 	&.newspack-card--is-clickable {
 		transition: box-shadow 125ms ease-in-out;
 
@@ -19,8 +18,7 @@
 		}
 	}
 
-	// Status
-
+	/* Status */
 	&.newspack-card__is-disabled,
 	&.newspack-card__is-primary,
 	&.newspack-card__is-secondary,
@@ -49,7 +47,7 @@
 		box-shadow: inset 4px 0 0 wp-colors.$alert-red;
 	}
 
-	// Small
+	/* Small */
 	&.is-small {
 		.newspack-action-card__region-top {
 			padding: 8px 16px;
@@ -116,8 +114,7 @@
 		}
 	}
 
-	// Medium
-
+	/* Medium */
 	&.is-medium {
 		.newspack-action-card__region-top {
 			padding: 16px;
@@ -146,8 +143,7 @@
 		}
 	}
 
-	// Nested children
-
+	/* Nested children */
 	&.newspack-card--has-children {
 		.newspack-action-card {
 			&:first-child {
@@ -164,8 +160,7 @@
 		}
 	}
 
-	// Has grey header
-
+	/* Has grey header */
 	&.newspack-card--has-grey-header {
 		overflow: hidden;
 
@@ -198,8 +193,7 @@
 		}
 	}
 
-	// Indent
-
+	/* Indent */
 	&.newspack-card--indent {
 		margin-left: 56px;
 		position: relative;
@@ -216,8 +210,7 @@
 		}
 	}
 
-	// Typography
-
+	/* Typography */
 	h2,
 	p:not([class*="components-base-control"]) {
 		margin: 0;
@@ -247,8 +240,7 @@
 		}
 	}
 
-	// Regions
-
+	/* Regions */
 	.newspack-action-card__region {
 		align-items: center;
 		display: flex;
@@ -264,7 +256,7 @@
 			display: flex;
 		}
 
-		// Toggle Control
+		/* Toggle Control */
 		.components-toggle-control {
 			margin-bottom: 24px;
 			margin-top: 0;
@@ -359,14 +351,12 @@
 		}
 	}
 
-	// Waiting
-
+	/* Waiting */
 	.newspack-action-card__container {
 		display: flex;
 	}
 
-	// Notifications
-
+	/* Notifications */
 	.newspack-action-card__notification {
 		.newspack-notice {
 			margin: 0;
@@ -383,8 +373,7 @@
 		}
 	}
 
-	// Image
-
+	/* Image */
 	.newspack-action-card__image {
 		background-position: center;
 		background-repeat: no-repeat;
@@ -394,40 +383,52 @@
 		width: 48px;
 	}
 
-	// Icon
-
+	/* Icon */
 	.newspack_plugin-installer__icon {
 		margin: 0;
 	}
 
-	// Badge
-
+	/* Badge */
 	.newspack-action-card__badge {
 		background: wp-colors.$gray-100;
 		border-radius: 2px;
 		color: wp-colors.$gray-900;
 		display: block;
 		flex: 0 0 auto;
-		font-size: 10px;
-		font-weight: bold;
-		line-height: 1.4;
+		font-size: 12px;
+		font-weight: 400;
+		line-height: 1.333;
 		margin: 0 8px 0 0;
-		padding: 2px 8px;
-		text-transform: uppercase;
+		padding: 2px 4px;
+
+		&.newspack-action-card__badge-level-warning {
+			background-color: color-mix(in srgb, #fff 90%, wp-colors.$alert-yellow);
+			color: color-mix(in srgb, #000 50%, wp-colors.$alert-yellow);
+		}
+		&.newspack-action-card__badge-level-error {
+			background-color: color-mix(in srgb, #fff 90%, wp-colors.$alert-red);
+			color: color-mix(in srgb, #000 50%, wp-colors.$alert-red);
+		}
+		&.newspack-action-card__badge-level-success {
+			background-color: color-mix(in srgb, #fff 90%, wp-colors.$alert-green);
+			color: color-mix(in srgb, #000 50%, wp-colors.$alert-green);
+		}
+		&.newspack-action-card__badge-level-brand {
+			background-color: color-mix(in srgb, #fff 90%, var(--wp-admin-theme-color));
+			color: color-mix(in srgb, #000 50%, var(--wp-admin-theme-color));
+		}
 
 		+ .newspack-action-card__badge {
 			margin-left: -4px;
 		}
 	}
 
-	// Description Card
-
+	/* Description Card */
 	&.newspack-description-card {
 		font-style: italic;
 	}
 
-	// Expandable card children
-
+	/* Expandable card children */
 	&.is-expandable {
 		.newspack-action-card__title .components-button.is-link {
 			color: inherit;
@@ -439,6 +440,10 @@
 		.newspack-action-card__region-children {
 			border-top: 1px solid wp-colors.$gray-100;
 			padding-top: 24px;
+
+			+ .newspack-action-card__region-children {
+				border-top: none;
+			}
 		}
 
 		&.is-medium .newspack-action-card__region-children {
@@ -460,7 +465,7 @@
 		}
 	}
 
-	// Action content with multiple buttons
+	/* Action content with multiple buttons */
 	&.has-action-content .newspack-action-card__region-right {
 		flex-direction: row;
 
@@ -468,16 +473,109 @@
 			margin-left: 8px;
 		}
 	}
+}
 
-	// Multiple Cards
+.newspack-card {
+	.newspack-card.newspack-action-card {
+		&:not(.newspack-card__no-border) {
+			border: 1px solid wp-colors.$gray-200;
+		}
+		&.newspack-card__no-border {
+			border: none;
+			.newspack-action-card__region-top,
+			.newspack-action-card__region-children {
+				padding: 0;
+			}
+		}
+	}
+}
+
+.newspack-action-card__draggable-wrapper {
+	margin: 16px 0;
 
-	& + & {
-		margin-top: -16px;
+	&.is-dragging {
+		opacity: 0.5;
+	}
+
+	.newspack-card {
+		margin: 0;
+	}
+
+	.newspack-action-card {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+
+		.newspack-action-card__draggable-controls {
+			flex: 0 0 50px;
+			align-items: center;
+			display: flex;
+			height: 100%;
+			min-height: 100%;
+			width: fit-content;
+			justify-content: center;
+			margin-left: 8px;
+			margin-right: 8px;
+			padding: 8px 12px 8px 0;
+			border-right: 1px solid wp-colors.$gray-300;
+
+			.drag-handle {
+				align-items: center;
+				cursor: grab;
+				display: flex;
+				height: 100%;
+				justify-content: flex-end;
+				margin-left: -8px;
+				width: 32px;
+
+				.is-dragging & {
+					cursor: grabbing;
+				}
+
+				svg {
+					padding: 3px;
+				}
+			}
+
+			.movers {
+				display: flex;
+				flex-direction: column;
+
+				.components-button {
+					color: wp-colors.$gray-900;
+					display: block;
+					height: 24px;
+					line-height: 24px;
+					min-width: 24px;
+					padding: 0;
+					width: 24px;
+					+ .components-button {
+						margin-top: -4px;
+					}
+				}
+			}
+		}
+
+		.newspack-action-card__region-top {
+			flex: 1 1 auto;
+			padding: 8px 16px 8px 0 !important;
+			flex: 1;
+		}
+
+		.newspack-action-card__region-children {
+			flex: 0 0 100%;
+			padding: 0 0 0 16px;
+		}
+
+		&.is-draggable {
+			display: flex;
+			align-items: center;
+		}
 	}
 }
 
-.newspack-card {
-	.newspack-card.newspack-action-card {
-		border: 1px solid wp-colors.$gray-200;
+.components-draggable__clone {
+	.newspack-card {
+		box-shadow: 0 0 8px 4px rgba(black, 0.08);
 	}
 }

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

@@ -228,7 +228,9 @@ class AutocompleteTokenField extends Component {
       help,
       label = '',
       placeholder = '',
-      maxLength
+      maxLength,
+      style,
+      __next40pxDefaultSize
     } = this.props;
     const {
       suggestions,
@@ -240,6 +242,7 @@ class AutocompleteTokenField extends Component {
     }
     return /*#__PURE__*/_jsxs("div", {
       className: "newspack-autocomplete-tokenfield",
+      style: style,
       children: [/*#__PURE__*/_jsxs("div", {
         className: classNames.join(' '),
         children: [/*#__PURE__*/_jsx(FormTokenField, {
@@ -249,7 +252,8 @@ class AutocompleteTokenField extends Component {
           onInputChange: input => this.debouncedUpdateSuggestions(input),
           label: label,
           maxLength: maxLength,
-          placeholder: placeholder
+          placeholder: placeholder,
+          __next40pxDefaultSize: __next40pxDefaultSize
         }), loading && /*#__PURE__*/_jsx(Spinner, {})]
       }), help && /*#__PURE__*/_jsx("p", {
         className: "newspack-autocomplete-tokenfield__help",

package/dist/esm/box-contrast/index.js

@@ -0,0 +1,44 @@
+/**
+ * Box Contrast
+ *
+ * can be used to dynamically assign black or white color/background-color based on a hex color.
+ * Black/white can be assigned to either text or background-color.
+ */
+
+/**
+ * Dependencies
+ */
+import { getContrast } from '../utils/color';
+
+/**
+ * Box Contrast component
+ *
+ * @return JSX.Element
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const BoxContrast = ({
+  hexColor,
+  isInverted = false,
+  children,
+  ...props
+}) => {
+  let contrastColor;
+  if (hexColor === '#f0f0f0') {
+    contrastColor = '#1e1e1e';
+  } else {
+    contrastColor = getContrast(hexColor);
+  }
+  const style = isInverted ? {
+    color: hexColor,
+    backgoundColor: contrastColor
+  } : {
+    backgroundColor: hexColor,
+    color: contrastColor
+  };
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    style: style,
+    children: children
+  });
+};
+export default BoxContrast;

package/dist/esm/button/index.js

@@ -40,7 +40,7 @@ const Button = ({
   if (isAwaitingOnClick) {
     otherProps.disabled = true;
   }
-  // @ts-ignore - @wordpress/components' Button can only have either href or onClick, not both.
+  // @ts-expect-error - @wordpress/components' Button can only have either href or onClick, not both.
   return /*#__PURE__*/_jsx(BaseComponent, {
     ...otherProps
   });

package/dist/esm/button-props/button-props.js

@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import isFunction from 'lodash/isFunction';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
+
+/**
+ * Creates button props based on an action
+ */
+export default function buttonProps(action) {
+  const props = {};
+  if (isFunction(action)) {
+    props.onClick = action;
+  }
+  if (isString(action)) {
+    props.href = action;
+  }
+  if (isObject(action)) {
+    if (action.handoff) {
+      props.plugin = action.handoff;
+      if (action.editLink) {
+        props.editLink = action.editLink;
+      }
+    }
+    if (action.onClick) {
+      props.onClick = action.onClick;
+    }
+    if (action.href) {
+      props.href = action.href;
+    }
+  }
+  return props;
+}

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

@@ -0,0 +1 @@
+export { default as buttonProps } from './button-props';

package/dist/esm/color-picker/index.js

@@ -22,6 +22,17 @@ extend([a11yPlugin]);
 const {
   InteractiveDiv
 } = utils;
+
+/**
+ * ColorPicker component.
+ *
+ * @param {Object}             props             - Component props.
+ * @param {JSX.Element|string} props.label       - Label for the color picker.
+ * @param {string}             [props.color]     - Default color.
+ * @param {Function}           props.onChange    - Function to call when the color changes.
+ * @param {string}             [props.className] - Additional class name.
+ * @return {JSX.Element} ColorPicker component.
+ */
 const ColorPicker = ({
   label,
   color = '#fff',

package/dist/esm/custom-select-control/style.scss

@@ -10,7 +10,7 @@
 		margin-bottom: 8px;
 	}
 
-	.components-custom-select-control__button {
+	button {
 		border-color: wp-colors.$gray-700;
 		border-radius: 2px;
 		color: wp-colors.$gray-900;
@@ -41,6 +41,10 @@
 		}
 	}
 
+	button + div {
+		min-width: 200px;
+	}
+
 	.components-custom-select-control__menu {
 		border-color: wp-colors.$gray-700;
 		border-radius: 2px;
@@ -54,7 +58,6 @@
 		cursor: pointer;
 		display: flex;
 		line-height: inherit;
-		margin: 0 0 0 28px;
 		padding: 6px 8px;
 		transition: color 125ms ease-in-out;
 
@@ -77,16 +80,8 @@
 
 		&.is-selected {
 			margin-left: 0;
-
-			&::before {
-				background:
-					url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTguMyA1LjZMOS45IDE2LjlsLTQuNi0zLjQtLjkgMS4yIDUuOCA0LjMgOS4zLTEyLjZ6IiBmaWxsPSIjMzM2NmZmIj48L3BhdGg+PC9zdmc+Cg==")
-					0 0 no-repeat;
-				content: "";
-				display: block;
-				height: 24px;
-				margin: 0 4px 0 0;
-				width: 24px;
+			span svg {
+				fill: var(--wp-admin-theme-color);
 			}
 		}
 	}

package/dist/esm/footer/index.js

@@ -11,11 +11,10 @@ import { ExternalLink } from '@wordpress/components';
 /**
  * Internal dependencies.
  */
-import { PatronsLogo } from '../';
 import './style.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const Footer = ({
-  simple
+  simple = undefined
 }) => {
   const {
     components_demo: componentsDemo = false,
@@ -71,29 +70,23 @@ const Footer = ({
       url: `mailto:${supportEmail}`
     });
   }
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: "newspack-footer",
-    children: [!simple && /*#__PURE__*/_jsx("div", {
-      className: "newspack-footer__inner",
-      children: /*#__PURE__*/_jsx("ul", {
-        children: footerElements.map(({
-          url,
-          label,
-          external
-        }, index) => /*#__PURE__*/_jsx("li", {
-          children: external ? /*#__PURE__*/_jsx(ExternalLink, {
-            href: url,
-            children: label
-          }) : /*#__PURE__*/_jsx("a", {
-            href: url,
-            children: label
-          })
-        }, index))
-      })
-    }), /*#__PURE__*/_jsx("div", {
-      className: "newspack-footer__logo",
-      children: /*#__PURE__*/_jsx(PatronsLogo, {})
-    })]
+    children: !simple && /*#__PURE__*/_jsx("ul", {
+      children: footerElements.map(({
+        url,
+        label,
+        external
+      }, index) => /*#__PURE__*/_jsx("li", {
+        children: external ? /*#__PURE__*/_jsx(ExternalLink, {
+          href: url,
+          children: label
+        }) : /*#__PURE__*/_jsx("a", {
+          href: url,
+          children: label
+        })
+      }, index))
+    })
   });
 };
 export default Footer;

package/dist/esm/footer/style.scss

@@ -5,16 +5,13 @@
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-footer {
-	align-items: stretch;
 	background: white;
 	border: 0 solid wp-colors.$gray-300;
 	border-width: 1px 0;
 	bottom: 0;
 	color: wp-colors.$gray-700;
 	display: flex;
-	flex-wrap: wrap;
 	font-size: 12px;
-	justify-content: space-between;
 	left: 0;
 	line-height: 16px;
 	position: absolute;
@@ -22,17 +19,6 @@
 
 	@media screen and ( min-width: 783px ) {
 		bottom: 40px;
-		flex-wrap: nowrap;
-	}
-
-	&__inner {
-		align-items: center;
-		display: flex;
-		flex: 0 0 100%;
-
-		@media screen and ( min-width: 783px ) {
-			flex: 1 1 auto;
-		}
 	}
 
 	ul {
@@ -57,26 +43,4 @@
 			}
 		}
 	}
-
-	&__logo {
-		align-items: center;
-		background: wp-colors.$gray-900;
-		display: flex;
-		margin: 0 0 -1px;
-		padding: 16px;
-		width: 100%;
-
-		@media screen and ( min-width: 783px ) {
-			margin: -1px 0 -1px 8px;
-			max-width: 33.33%;
-			width: auto;
-		}
-
-		.patrons-logo {
-			display: block;
-			fill: white;
-			max-height: 16px;
-			width: auto;
-		}
-	}
 }

package/dist/esm/handoff-message/index.js

@@ -31,9 +31,6 @@ export default function HandoffMessage() {
         setHandoffMessage(false);
       }
     }, 100);
-
-    // Clean up the notification when unmounting.
-    return () => window.localStorage.removeItem(HANDOFF_KEY);
   }, []);
   if (!handoffMessage) {
     return null;

package/dist/esm/hooks/useObjectState.js

@@ -4,6 +4,12 @@
 import { useState } from '@wordpress/element';
 import isArray from 'lodash/isArray';
 import mergeWith from 'lodash/mergeWith';
+
+/**
+ * @typedef {Object} StateObjectUpdate
+ * @property {Object.<string, any>} [update] The update object with key-value pairs to merge into the state.
+ */
+
 const mergeCustomizer = (objValue, srcValue) => {
   if (isArray(objValue)) {
     // If it's an array, replace it (instead of concatenating).
@@ -14,6 +20,10 @@ const mergeCustomizer = (objValue, srcValue) => {
 /**
  * A useState for an object.
  * Nested objects will be nested, but arrays replaced.
+ *
+ * @template T
+ * @param {T} initial Initial state object.
+ * @return {[T, (keyOrUpdate: string | Partial<T>) => (value?: any) => void]} The state object and a function to update it.
  */
 export default (initial = {}) => {
   const [stateObject, setStateObject] = useState(initial);

package/dist/esm/hooks/useObjectState.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
 import useObjectState from './useObjectState';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const INIT_STATE = {
@@ -51,27 +51,27 @@ describe('useObjectState', () => {
   });
   it('updates arrays', () => {
     expect(getState()).toStrictEqual(INIT_STATE);
-    screen.getByText('Remove widgets').click();
+    act(() => screen.getByText('Remove widgets').click());
     expect(getState()).toMatchObject({
       widgets: []
     });
-    screen.getByText('Add widget').click();
+    act(() => screen.getByText('Add widget').click());
     expect(getState()).toMatchObject({
       widgets: [1]
     });
   });
   it('updates a simple value', () => {
-    fireEvent.change(screen.getByPlaceholderText('name'), {
+    act(() => fireEvent.change(screen.getByPlaceholderText('name'), {
       target: {
         value: 'Ramon'
       }
-    });
+    }));
     expect(getState()).toMatchObject({
       name: 'Ramon'
     });
   });
   it('updates a nested object', () => {
-    screen.getByText('Nested update').click();
+    act(() => screen.getByText('Nested update').click());
     expect(getState()).toMatchObject({
       attributes: {
         bar: 2,