newspack-components 4.1.0 → 4.3.0

package/dist/cjs/grid/index.js

@@ -22,13 +22,14 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const Grid = ({
   className = '',
+  borders = false,
   columns = 2,
   gutter = 32,
   noMargin = false,
   rowGap = 0,
   ...otherProps
 }) => {
-  const classes = (0, _classnames.default)('newspack-grid', noMargin && 'newspack-grid--no-margin', columns && 'newspack-grid__columns-' + columns, gutter && 'newspack-grid__gutter-' + gutter, rowGap && 'newspack-grid__row-gap-' + rowGap, className);
+  const classes = (0, _classnames.default)('newspack-grid', borders && 'newspack-grid__borders', noMargin && 'newspack-grid--no-margin', columns && 'newspack-grid__columns-' + columns, gutter && 'newspack-grid__gutter-' + gutter, rowGap && 'newspack-grid__row-gap-' + rowGap, className);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: classes,
     ...otherProps

package/dist/cjs/grid/style.scss

@@ -13,7 +13,7 @@
 
 	// No Margin
 	&--no-margin {
-		margin: 0;
+		margin: 0 !important;
 	}
 
 	// Gutter 0
@@ -41,6 +41,11 @@
 		grid-gap: 32px;
 	}
 
+	// Gutter 64
+	&__gutter-64 {
+		grid-gap: 64px;
+	}
+
 	// Row Gap 0
 	&__row-gap-0 {
 		grid-row-gap: 0;
@@ -61,11 +66,6 @@
 		grid-row-gap: 32px;
 	}
 
-	// Gutter 64
-	&__gutter-64 {
-		grid-gap: 64px;
-	}
-
 	// Columns 6
 	&__columns-6 {
 		grid-template-columns: repeat(2, 1fr);
@@ -77,6 +77,14 @@
 		&__columns-3,
 		&__columns-4 {
 			grid-template-columns: repeat(2, 1fr);
+
+			> [start] {
+				grid-column-start: 1;
+			}
+
+			> [end] {
+				grid-column-end: -1;
+			}
 		}
 
 		&__columns-6 {
@@ -84,8 +92,8 @@
 		}
 	}
 
-	// Media Queries - 1128px
-	@media screen and ( min-width: 1128px ) {
+	// Media Queries - 1054px
+	@media screen and ( min-width: 1054px ) {
 		// Columns 3
 		&__columns-3 {
 			grid-template-columns: repeat(3, 1fr);
@@ -94,6 +102,14 @@
 		// Columns 4
 		&__columns-4 {
 			grid-template-columns: repeat(4, 1fr);
+
+			> [start="2"] {
+				grid-column-start: 2;
+			}
+
+			> [end="4"] {
+				grid-column-end: 4;
+			}
 		}
 
 		// Columns 6
@@ -116,6 +132,44 @@
 	> * {
 		margin-bottom: 0 !important;
 		margin-top: 0 !important;
+		> h1:first-child,
+		> h2:first-child,
+		> h3:first-child,
+		> h4:first-child,
+		> h5:first-child,
+		> h6:first-child {
+			margin-top: 0;
+		}
+	}
+
+	// Borders
+	&__borders {
+		grid-gap: 0 !important;
+		> * {
+			border-bottom: 1px solid wp-colors.$gray-300;
+			&:last-child {
+				border-bottom: none;
+			}
+			@media screen and ( min-width: 744px ) {
+				border-bottom: none;
+				border-right: 1px solid wp-colors.$gray-300;
+				&:last-child {
+					border-right: none;
+				}
+			}
+		}
+		&.newspack-grid__gutter-8 > * {
+			padding: 8px;
+		}
+		&.newspack-grid__gutter-16 > * {
+			padding: 16px;
+		}
+		&.newspack-grid__gutter-32 > * {
+			padding: 32px;
+		}
+		&.newspack-grid__gutter-64 > * {
+			padding: 64px;
+		}
 	}
 
 	.components-base-control {
@@ -163,4 +217,4 @@
 	&__tbody + &__tbody {
 		margin-top: -32px;
 	}
-}
+}

package/dist/cjs/index.js

@@ -22,12 +22,24 @@ Object.defineProperty(exports, "AutocompleteTokenField", {
     return _autocompleteTokenfield.default;
   }
 });
+Object.defineProperty(exports, "AutocompleteWithLatestPosts", {
+  enumerable: true,
+  get: function () {
+    return _autocompleteWithLatestPosts.default;
+  }
+});
 Object.defineProperty(exports, "AutocompleteWithSuggestions", {
   enumerable: true,
   get: function () {
     return _autocompleteWithSuggestions.default;
   }
 });
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function () {
+    return _badge.default;
+  }
+});
 Object.defineProperty(exports, "BoxContrast", {
   enumerable: true,
   get: function () {
@@ -52,6 +64,18 @@ Object.defineProperty(exports, "Card", {
     return _card.default;
   }
 });
+Object.defineProperty(exports, "CardSettingsGroup", {
+  enumerable: true,
+  get: function () {
+    return _cardSettingsGroup.default;
+  }
+});
+Object.defineProperty(exports, "CardSortableList", {
+  enumerable: true,
+  get: function () {
+    return _cardSortableList.default;
+  }
+});
 Object.defineProperty(exports, "CategoryAutocomplete", {
   enumerable: true,
   get: function () {
@@ -64,12 +88,24 @@ Object.defineProperty(exports, "ColorPicker", {
     return _colorPicker.default;
   }
 });
+Object.defineProperty(exports, "ConfirmDialog", {
+  enumerable: true,
+  get: function () {
+    return _confirmDialog.default;
+  }
+});
 Object.defineProperty(exports, "CustomSelectControl", {
   enumerable: true,
   get: function () {
     return _customSelectControl.default;
   }
 });
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function () {
+    return _divider.default;
+  }
+});
 Object.defineProperty(exports, "Footer", {
   enumerable: true,
   get: function () {
@@ -272,13 +308,19 @@ var _accordion = _interopRequireDefault(require("./accordion"));
 var _actionCard = _interopRequireDefault(require("./action-card"));
 var _autocompleteTokenfield = _interopRequireDefault(require("./autocomplete-tokenfield"));
 var _autocompleteWithSuggestions = _interopRequireDefault(require("./autocomplete-with-suggestions"));
+var _autocompleteWithLatestPosts = _interopRequireDefault(require("./autocomplete-with-latest-posts"));
+var _badge = _interopRequireDefault(require("./badge"));
 var _button = _interopRequireDefault(require("./button"));
 var _buttonCard = _interopRequireDefault(require("./button-card"));
 var _boxContrast = _interopRequireDefault(require("./box-contrast"));
 var _card = _interopRequireDefault(require("./card"));
+var _cardSettingsGroup = _interopRequireDefault(require("./card-settings-group"));
+var _cardSortableList = _interopRequireDefault(require("./card-sortable-list"));
 var _categoryAutocomplete = _interopRequireDefault(require("./category-autocomplete"));
 var _colorPicker = _interopRequireDefault(require("./color-picker"));
+var _confirmDialog = _interopRequireDefault(require("./confirm-dialog"));
 var _customSelectControl = _interopRequireDefault(require("./custom-select-control"));
+var _divider = _interopRequireDefault(require("./divider"));
 var _formTokenField = _interopRequireDefault(require("./form-token-field"));
 var _footer = _interopRequireDefault(require("./footer"));
 var _handoff = _interopRequireDefault(require("./handoff"));

package/dist/cjs/modal/index.js

@@ -26,16 +26,23 @@ var _jsxRuntime = require("react/jsx-runtime");
  * External dependencies.
  */
 
+const sizeClassMap = {
+  small: 'newspack-modal--size-small',
+  medium: 'newspack-modal--size-medium',
+  large: 'newspack-modal--size-large',
+  'x-large': 'newspack-modal--size-x-large',
+  full: 'newspack-modal--size-full'
+};
+const getSizeClassName = size => sizeClassMap[size] || sizeClassMap.medium;
 function Modal({
   className,
-  isWide,
-  isNarrow,
+  size = 'medium',
   hideTitle,
   ...otherProps
 }, ref) {
-  const classes = (0, _classnames.default)('newspack-modal', isWide && 'newspack-modal--wide', isNarrow && 'newspack-modal--narrow', hideTitle && 'newspack-modal--hide-title',
+  const classes = (0, _classnames.default)('newspack-modal', hideTitle && 'newspack-modal--hide-title',
   // Note: also hides the X close button.
-  className);
+  getSizeClassName(size), className);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
     className: classes,
     ...otherProps,

package/dist/cjs/modal/style.scss

@@ -12,20 +12,37 @@
 	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
 	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
 	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
+	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
 
-	@media screen and ( min-width: 744px ) {
-		max-width: 680px;
-		width: 680px;
+	border-radius: 8px;
+	margin: auto;
+	max-height: calc(100% - 64px);
+	max-width: 512px;
+	width: calc(100% - 64px);
 
-		&--wide {
-			max-width: 1168px;
-			width: 1168px;
+	&--size-small {
+		max-width: 384px;
+
+		&.newspack-modal--hide-title {
+			max-width: 350px;
 		}
 	}
 
-	&--narrow {
-		max-width: 360px;
-		width: 360px;
+	&--size-medium {
+		max-width: 512px;
+	}
+
+	&--size-large {
+		max-width: 840px;
+	}
+
+	&--size-x-large {
+		max-width: calc(var(--newspack-wizard-section-width) + 64px)
+	}
+
+	&--size-full {
+		max-width: 100%;
 	}
 
 	&--hide-title {
@@ -39,8 +56,15 @@
 		}
 	}
 
-	@media screen and ( min-width: 960px ) {
-		max-height: calc(100% - 128px);
+	&--destructive {
+		.components-button.is-primary {
+			background-color: colors.$error-500;
+			color: colors.$neutral-000;
+			&:hover,
+			&:focus {
+				background-color: colors.$error-600;
+			}
+		}
 	}
 
 	// Links
@@ -60,8 +84,14 @@
 	}
 
 	.components-modal__content {
-		> *:last-child {
-			margin-bottom: 0;
+		> * {
+			&:first-child {
+				margin-top: 0;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
 		}
 	}
 }

package/dist/cjs/newspack-icon/style.scss

@@ -1,20 +1,22 @@
+@use '../../../colors/colors.module.scss' as colors;
+
 /**
  * Newspack Icon
  */
 
 .newspack-icon {
-	background: var(--wp-admin-theme-color);
+	background: colors.$primary-600;
 	fill: white;
 	padding: 12px;
 
 	&--white {
 		background: white;
-		fill: var(--wp-admin-theme-color);
+		fill: colors.$primary-600;
 	}
 
 	&--simple {
 		background: none;
-		fill: var(--wp-admin-theme-color);
+		fill: colors.$primary-600;
 		padding: 0;
 	}
 

package/dist/cjs/popover/style.scss

@@ -75,7 +75,7 @@
 		}
 
 		.screen-reader-text {
-			display: flex;
+			opacity: 0;
 		}
 
 		.newspack-select-control {

package/dist/cjs/section-header/index.js

@@ -5,7 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _icons = require("@wordpress/icons");
 var _ = require("..");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -18,6 +21,8 @@ var _jsxRuntime = require("react/jsx-runtime");
  * WordPress dependencies
  */
 
+// eslint-disable-line @wordpress/no-unsafe-wp-apis
+
 /**
  * Internal dependencies
  */
@@ -30,14 +35,20 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Represents a section header component.
  *
  * @typedef {Object} SectionHeaderProps
- * @property {boolean}           [centered=false] - Indicates if the header is centered.
- * @property {?string}           [className=null] - Additional CSS class name.
- * @property {string|Function|*} [description]    - Description of the section.
- * @property {number}            [heading=2]      - HTML heading level, e.g., 1 for h1, 2 for h2, etc.
- * @property {boolean}           [isWhite=false]  - Indicates if the header should use a white theme.
- * @property {boolean}           [noMargin=false] - Indicates if the header should have no margin.
- * @property {string}            title            - The title of the section.
- * @property {?string}           [id=null]        - Optional ID for the header element.
+ * @property {string}             [backNav='']       - URL to navigate back to.
+ * @property {string|string[]}    [badge]            - Badge to display in the header.
+ * @property {string}             [badgeLevel]       - Badge level, e.g., 'success', 'info', 'warning', 'error'.
+ * @property {boolean}            [centered=false]   - Indicates if the header is centered.
+ * @property {?string}            [className=null]   - Additional CSS class name.
+ * @property {string|Function|*}  [description]      - Description of the section.
+ * @property {number}             [heading=2]        - HTML heading level, e.g., 1 for h1, 2 for h2, etc.
+ * @property {string|Function|*}  [icon]             - Icon to display in the header.
+ * @property {boolean}            [isWhite=false]    - Indicates if the header should use a white theme.
+ * @property {boolean}            [noMargin=false]   - Indicates if the header should have no margin.
+ * @property {boolean}            [pageHeader=false] - Indicates if the header is used as a page header.
+ * @property {string}             title              - The title of the section.
+ * @property {?string}            [id=null]          - Optional ID for the header element.
+ * @property {?string|Function|*} [children=null]    - Optional children to display in the header.
  */
 
 /**
@@ -45,14 +56,21 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  * @param {SectionHeaderProps} props - The properties for the section header.
  */const SectionHeader = ({
+  backNav = '',
+  badges,
   centered = false,
   className = null,
   description = '',
   heading = 2,
+  icon = null,
   isWhite = false,
   noMargin = false,
+  pageHeader = false,
   title,
-  id = null
+  id = null,
+  primaryAction,
+  secondaryAction,
+  children = null
 }) => {
   // If id is in the URL as a scrollTo param, scroll to it on render.
   const ref = (0, _element.useRef)();
@@ -68,18 +86,48 @@ var _jsxRuntime = require("react/jsx-runtime");
       }), 250);
     }
   }, []);
-  const classes = (0, _classnames.default)('newspack-section-header', centered && 'newspack-section-header--is-centered', isWhite && 'newspack-section-header--is-white', noMargin && 'newspack-section-header--no-margin', className);
-  const HeadingTag = `h${heading}`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  const classes = (0, _classnames.default)('newspack-section-header', centered && 'newspack-section-header--is-centered', isWhite && 'newspack-section-header--is-white', noMargin && 'newspack-section-header--no-margin', pageHeader && 'newspack-section-header--page-header');
+  const HeadingTag = pageHeader ? 'h1' : `h${heading}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     id: id,
-    className: "newspack-section-header__container",
+    className: (0, _classnames.default)('newspack-section-header__container', backNav && 'newspack-section-header--has-back-nav', primaryAction && 'newspack-section-header--has-primary-action', className),
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
       columns: 1,
       gutter: 8,
       className: classes,
-      children: [typeof title === 'string' && /*#__PURE__*/(0, _jsxRuntime.jsx)(HeadingTag, {
-        children: title
+      children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-section-header__icon",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+          icon: icon,
+          size: 48
+        })
+      }), backNav && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-section-header__back-nav",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
+          text: (0, _i18n.__)('Go back', 'newspack-plugin'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+            href: backNav,
+            icon: _icons.chevronLeft,
+            variant: "tertiary"
+          })
+        })
+      }), typeof title === 'string' && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "newspack-section-header__title-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HeadingTag, {
+          children: title
+        }), badges?.length ? badges.map((badge, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Badge, {
+          text: badge.label,
+          level: badge.level || 'default'
+        }, i)) : null, secondaryAction && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "newspack-section-header__secondary-action",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+            variant: "link",
+            href: secondaryAction.href,
+            onClick: secondaryAction.action,
+            children: secondaryAction.label
+          })
+        })]
       }), typeof title === 'function' && /*#__PURE__*/(0, _jsxRuntime.jsx)(HeadingTag, {
         children: title()
       }), description && typeof description === 'string' && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
@@ -88,8 +136,19 @@ var _jsxRuntime = require("react/jsx-runtime");
         children: description()
       }), description && typeof description !== 'string' && typeof description !== 'function' && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         children: description
+      }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-section-header__children",
+        children: children
       })]
-    })
+    }), primaryAction && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "newspack-section-header__primary-action",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+        href: primaryAction.href,
+        variant: "primary",
+        onClick: primaryAction.action,
+        children: primaryAction.label
+      })
+    })]
   });
 };
 var _default = exports.default = SectionHeader;

package/dist/cjs/section-header/style.scss

@@ -3,21 +3,58 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../colors/colors.module" as colors;
 
 .newspack-section-header {
+	flex: 1;
 	margin: 64px 0 32px;
 
-	&__container:not(:first-child) {
-		margin-top: 48px;
+	&__container {
+		position: relative;
+		&:not(:first-child) {
+			margin-top: 48px;
+		}
+		&.newspack-section-header--has-primary-action {
+			display: flex;
+			flex-direction: column;
+			gap: 32px;
+			@media (min-width: 782px) {
+				align-items: flex-start;
+				flex-direction: row;
+			}
+		}
+		&.newspack-section-header--has-back-nav {
+			--back-nav-button-size: 36px;
+			margin-left: calc(var(--back-nav-button-size) + 8px);
+			@media (min-width: 782px) {
+				margin-left: 0;
+			}
+		}
+	}
+
+	&__back-nav {
+		left: calc((var(--back-nav-button-size) + 8px) * -1);
+		position: absolute;
+		top: calc(50% - (var(--back-nav-button-size) / 2));
+		a,
+		button {
+			color: inherit !important;
+		}
 	}
 
-	&--no-margin,
 	h1,
 	h2,
 	h3,
 	h4,
 	h5,
 	h6 {
+		align-items: center;
+		display: flex;
+		gap: 8px;
+		margin: 0 !important;
+	}
+
+	&--no-margin {
 		margin: 0 !important;
 	}
 
@@ -25,7 +62,7 @@
 		text-align: center;
 	}
 
-	&:not( #{&}--no-margin ) + *:not( #{&} ) {
+	&:not( #{&}--no-margin ) + *:not( #{&} ):not(.newspack-wizard__section-header):not(.newspack-section-header__primary-action) {
 		margin-top: -16px !important;
 	}
 
@@ -39,7 +76,75 @@
 		color: wp-colors.$gray-700;
 	}
 
+	&__title-container {
+		align-items: baseline;
+		display: flex;
+		gap: 8px;
+
+		.newspack-badge {
+			transform: translateY(-4px);
+		}
+	}
+
+	&__primary-action {
+		@media (min-width: 782px) {
+			display: flex;
+			flex: 1;
+			justify-content: flex-end;
+		}
+	}
+
+	&__secondary-action {
+		display: flex;
+		margin-left: 8px;
+	}
+
+	&__children {
+		margin-top: 32px;
+		width: 100%;
+		.newspack-button-card:not(.grouped) {
+			margin-bottom: 0;
+			& + .newspack-button-card:not(.grouped) {
+				margin-top: 16px;
+			}
+		}
+	}
+
 	.newspack-wizard__content &:first-child {
 		margin-top: 32px;
 	}
+	&.newspack-section-header--page-header {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin-left: auto;
+		margin-right: auto;
+		> h1,
+		> h2,
+		> h3,
+		> h4,
+		> h5,
+		> h6,
+		> p {
+			text-align: center;
+		}
+		.newspack-section-header__icon {
+			background-color: var(--wp-admin-theme-color-lighter-10);
+			border-radius: 100%;
+			display: grid;
+			height: 80px;
+			margin-bottom: 8px !important;
+			width: 80px;
+			place-items: center;
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+		}
+		h1 {
+			font-size: 1.25rem;
+			font-weight: 500;
+			line-height: 1.5;
+		}
+	}
 }

package/dist/cjs/style.scss

@@ -9,6 +9,8 @@
 	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
 	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
 	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
+	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
 }
 
 // Buttons Card

package/dist/cjs/waiting/index.js

@@ -36,12 +36,14 @@ class Waiting extends _element.Component {
       isRight,
       isLeft,
       isCenter,
+      noMargin,
       ...otherProps
     } = this.props;
     const classes = (0, _classnames.default)('newspack-waiting', className, {
       'is-right': isRight,
       'is-left': isLeft,
-      'is-center': isCenter
+      'is-center': isCenter,
+      'no-margin': noMargin
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {
       className: classes,