newspack-components 4.1.0 → 4.3.0

package/dist/esm/card-sortable-list/style.scss

@@ -0,0 +1,48 @@
+$collapse-duration: 200ms;
+$shift-duration: 150ms;
+$drop-duration: 400ms; /* must match DROP_ANIMATION_DURATION in index.tsx */
+
+.newspack-card--core--sortable-list {
+	&__item {
+		cursor: grab;
+
+		/*
+		 * Animate items sliding to fill/make space around the dragged item.
+		 */
+		transition: transform $shift-duration ease;
+
+		/*
+		 * Collapse the source item's content — the wrapper stays in layout as the
+		 * anchor point, and the container height is locked via inline style in JS.
+		 */
+		&.is-source {
+			cursor: grabbing;
+			opacity: 0;
+			transition: opacity $collapse-duration ease;
+		}
+
+		/*
+		 * Drop landing animation: brief fade-in and scale on the newly placed item.
+		 */
+		&.is-dropped {
+			animation: newspack-sortable-drop $drop-duration ease forwards;
+			opacity: 0;
+		}
+
+	}
+}
+
+@keyframes newspack-sortable-drop {
+	0% {
+		opacity: 0;
+		transform: scale(0.98);
+	}
+	60% {
+		opacity: 1;
+		transform: scale(1.01);
+	}
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+}

package/dist/esm/confirm-dialog/index.js

@@ -0,0 +1,49 @@
+/**
+ * Modal
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { forwardRef } from '@wordpress/element';
+import { __experimentalConfirmDialog as BaseComponent } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/*
+ * See both https://wordpress.github.io/gutenberg/?path=/docs/components-confirmdialog--docs and
+ * https://wordpress.github.io/gutenberg/?path=/docs/components-modal--docs for all supported props.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+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'
+};
+function ConfirmDialog({
+  className,
+  size = 'small',
+  hideTitle,
+  isDestructive,
+  onConfirm,
+  onCancel,
+  ...otherProps
+}, ref) {
+  const classes = classnames('newspack-modal', sizeClassMap[size], hideTitle && 'newspack-modal--hide-title',
+  // Note: also hides the X close button.
+  isDestructive && 'newspack-modal--destructive', className);
+  return /*#__PURE__*/_jsx(BaseComponent, {
+    className: classes,
+    ...otherProps,
+    ref: ref,
+    onConfirm: onConfirm,
+    onCancel: onCancel,
+    __experimentalHideHeader: false
+  });
+}
+export default forwardRef(ConfirmDialog);

package/dist/esm/divider/index.js

@@ -0,0 +1,34 @@
+/**
+ * Divider
+ */
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Divider = ({
+  alignment = 'none',
+  className = undefined,
+  marginBottom = 64,
+  marginTop = 64,
+  variant = 'default',
+  ...otherProps
+}) => {
+  const classes = classNames('newspack-divider', className, alignment && `newspack-divider--alignment-${alignment}`, variant && `newspack-divider--variant-${variant}`);
+  const style = {
+    '--divider-margin-bottom': typeof marginBottom === 'number' ? `${marginBottom}px` : marginBottom,
+    '--divider-margin-top': typeof marginTop === 'number' ? `${marginTop}px` : marginTop
+  };
+  return /*#__PURE__*/_jsx("hr", {
+    className: classes,
+    style: style,
+    ...otherProps
+  });
+};
+export default Divider;

package/dist/esm/divider/style.scss

@@ -0,0 +1,51 @@
+/**
+ * Divider
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-divider {
+	background: transparent;
+	border: 0;
+	display: block;
+	height: 1px;
+	margin-bottom: min(32px, var(--divider-margin-bottom, 64px));
+	margin-left: 0;
+	margin-right: 0;
+	margin-top: min(32px, var(--divider-margin-top, 64px));
+	padding: 0;
+
+	@media screen and (min-width: 783px) {
+		margin-bottom: var(--divider-margin-bottom, 64px);
+		margin-top: var(--divider-margin-top, 64px);
+	}
+
+	// Alignment
+
+	&--alignment-full-width {
+		margin-left: calc(-50vw + 50%);
+		width: 100vw;
+	}
+
+	&--alignment-none {
+		width: 100%;
+	}
+
+	// Variant
+
+	&--variant-default {
+		background-color: wp-colors.$gray-300;
+	}
+
+	&--variant-primary {
+		background-color: var(--wp-admin-theme-color);
+	}
+
+	&--variant-secondary {
+		background-color: wp-colors.$gray-900;
+	}
+
+	&--variant-tertiary {
+		background-color: wp-colors.$gray-100;
+	}
+}

package/dist/esm/form-token-field/style.scss

@@ -7,11 +7,6 @@
 .newspack-form-token-field {
 	width: 100%;
 
-	.components-form-token-field__input-container {
-		padding-bottom: 1px;
-		padding-top: 1px;
-	}
-
 	// Help
 
 	&__help {

package/dist/esm/grid/index.js

@@ -14,13 +14,14 @@ import classnames from 'classnames';
 import { jsx as _jsx } from "react/jsx-runtime";
 const Grid = ({
   className = '',
+  borders = false,
   columns = 2,
   gutter = 32,
   noMargin = false,
   rowGap = 0,
   ...otherProps
 }) => {
-  const classes = classnames('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 = classnames('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__*/_jsx("div", {
     className: classes,
     ...otherProps

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

@@ -2,13 +2,19 @@ export { default as Accordion } from './accordion';
 export { default as ActionCard } from './action-card';
 export { default as AutocompleteTokenField } from './autocomplete-tokenfield';
 export { default as AutocompleteWithSuggestions } from './autocomplete-with-suggestions';
+export { default as AutocompleteWithLatestPosts } from './autocomplete-with-latest-posts';
+export { default as Badge } from './badge';
 export { default as Button } from './button';
 export { default as ButtonCard } from './button-card';
 export { default as BoxContrast } from './box-contrast';
 export { default as Card } from './card';
+export { default as CardSettingsGroup } from './card-settings-group';
+export { default as CardSortableList } from './card-sortable-list';
 export { default as CategoryAutocomplete } from './category-autocomplete';
 export { default as ColorPicker } from './color-picker';
+export { default as ConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
+export { default as Divider } from './divider';
 export { default as FormTokenField } from './form-token-field';
 export { default as Footer } from './footer';
 export { default as Handoff } from './handoff';

package/dist/esm/modal/index.js

@@ -18,16 +18,23 @@ import './style.scss';
  */
 import classnames from 'classnames';
 import { jsx as _jsx } from "react/jsx-runtime";
+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 = classnames('newspack-modal', isWide && 'newspack-modal--wide', isNarrow && 'newspack-modal--narrow', hideTitle && 'newspack-modal--hide-title',
+  const classes = classnames('newspack-modal', hideTitle && 'newspack-modal--hide-title',
   // Note: also hides the X close button.
-  className);
+  getSizeClassName(size), className);
   return /*#__PURE__*/_jsx(BaseComponent, {
     className: classes,
     ...otherProps,

package/dist/esm/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/esm/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/esm/popover/style.scss

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

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

@@ -5,12 +5,15 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { useEffect, useRef } from '@wordpress/element';
+import { Tooltip } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { Icon, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { Grid } from '..';
+import { Badge, Button, Grid } from '..';
 import './style.scss';
 
 /**
@@ -22,14 +25,20 @@ import classnames from 'classnames';
  * 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.
  */
 
 /**
@@ -39,14 +48,21 @@ import classnames from 'classnames';
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 = useRef();
@@ -62,18 +78,48 @@ const SectionHeader = ({
       }), 250);
     }
   }, []);
-  const classes = classnames('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__*/_jsx("div", {
+  const classes = classnames('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__*/_jsxs("div", {
     id: id,
-    className: "newspack-section-header__container",
+    className: classnames('newspack-section-header__container', backNav && 'newspack-section-header--has-back-nav', primaryAction && 'newspack-section-header--has-primary-action', className),
     ref: ref,
-    children: /*#__PURE__*/_jsxs(Grid, {
+    children: [/*#__PURE__*/_jsxs(Grid, {
       columns: 1,
       gutter: 8,
       className: classes,
-      children: [typeof title === 'string' && /*#__PURE__*/_jsx(HeadingTag, {
-        children: title
+      children: [icon && /*#__PURE__*/_jsx("div", {
+        className: "newspack-section-header__icon",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: icon,
+          size: 48
+        })
+      }), backNav && /*#__PURE__*/_jsx("div", {
+        className: "newspack-section-header__back-nav",
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          text: __('Go back', 'newspack-plugin'),
+          children: /*#__PURE__*/_jsx(Button, {
+            href: backNav,
+            icon: chevronLeft,
+            variant: "tertiary"
+          })
+        })
+      }), typeof title === 'string' && /*#__PURE__*/_jsxs("div", {
+        className: "newspack-section-header__title-container",
+        children: [/*#__PURE__*/_jsx(HeadingTag, {
+          children: title
+        }), badges?.length ? badges.map((badge, i) => /*#__PURE__*/_jsx(Badge, {
+          text: badge.label,
+          level: badge.level || 'default'
+        }, i)) : null, secondaryAction && /*#__PURE__*/_jsx("div", {
+          className: "newspack-section-header__secondary-action",
+          children: /*#__PURE__*/_jsx(Button, {
+            variant: "link",
+            href: secondaryAction.href,
+            onClick: secondaryAction.action,
+            children: secondaryAction.label
+          })
+        })]
       }), typeof title === 'function' && /*#__PURE__*/_jsx(HeadingTag, {
         children: title()
       }), description && typeof description === 'string' && /*#__PURE__*/_jsx("p", {
@@ -82,8 +128,19 @@ const SectionHeader = ({
         children: description()
       }), description && typeof description !== 'string' && typeof description !== 'function' && /*#__PURE__*/_jsx("p", {
         children: description
+      }), children && /*#__PURE__*/_jsx("div", {
+        className: "newspack-section-header__children",
+        children: children
       })]
-    })
+    }), primaryAction && /*#__PURE__*/_jsx("div", {
+      className: "newspack-section-header__primary-action",
+      children: /*#__PURE__*/_jsx(Button, {
+        href: primaryAction.href,
+        variant: "primary",
+        onClick: primaryAction.action,
+        children: primaryAction.label
+      })
+    })]
   });
 };
 export default SectionHeader;