newspack-components 4.2.0 → 4.3.0

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

@@ -0,0 +1,227 @@
+/**
+ * Card using WP Core component
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../colors/colors.module" as colors;
+
+.newspack-card--core,
+.newspack-wizard .newspack-card--core {
+	background: white;
+	position: relative;
+	transition: background-color 125ms ease-in-out, box-shadow 125ms ease-in-out, color 125ms ease-in-out;
+	svg {
+		transition: fill 125ms ease-in-out;
+	}
+	&__icon {
+		border-radius: 50%;
+		display: grid;
+		height: 48px;
+		place-items: center;
+		width: 48px;
+		svg {
+			fill: var(--wp-admin-theme-color);
+			height: 40px;
+			width: 40px;
+		}
+		.newspack-card--core__has-icon-background-color & {
+			background: var(--wp-admin-theme-color-lighter-10);
+		}
+	}
+	&__is-small {
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			font-size: 14px;
+			font-weight: 500;
+		}
+		.newspack-card--core__icon {
+			height: 40px;
+			width: 40px;
+			svg {
+				height: 24px;
+				width: 24px;
+			}
+		}
+	}
+	&__no-margin .components-card__body {
+		padding: 0 !important;
+	}
+	&__header {
+		color: wp-colors.$gray-700;
+		column-gap: 16px;
+		position: relative;
+		.newspack-card--core__action {
+			margin: 0;
+			label {
+				border: 0;
+				clip-path: inset(50%);
+				height: 1px;
+				margin: -1px;
+				overflow: hidden;
+				padding: 0;
+				position: absolute !important;
+				width: 1px;
+				word-wrap: normal !important;
+			}
+		}
+		.components-dropdown-menu {
+			aspect-ratio: 1;
+			border-left: 1px solid wp-colors.$gray-200;
+			display: grid;
+			height: 100%;
+			padding: 4px;
+			place-items: center;
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
+	}
+	&__header--is-draggable {
+		.newspack-card--core__header-content {
+			padding-left: 65px;
+		}
+		.newspack-card--core__header__draggable-controls {
+			align-items: center;
+			border-right: 1px solid wp-colors.$gray-200;
+			display: flex;
+			height: 100%;
+			justify-content: space-between;
+			left: 0;
+			padding: 0 8px;
+			position: absolute;
+			top: 0;
+		}
+		.newspack-card--core__header__draggable-controls__drag-handle {
+			cursor: grab;
+			display: grid;
+			place-items: center;
+		}
+		.newspack-card--core__header__draggable-controls__move-buttons {
+			display: flex;
+			flex-direction: column;
+			.components-button.has-icon {
+				height: 16px;
+				padding: 0;
+				width: 100%;
+			}
+		}
+	}
+	button.newspack-card--core__header {
+		appearance: none;
+		background-color: white;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+	}
+	&__header-content {
+		display: grid;
+		flex: 1;
+		grid-gap: 8px;
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6,
+		p {
+			margin-bottom: 0;
+			margin-top: 0;
+			transition: color 125ms ease-in-out;
+		}
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			align-items: center;
+			color: wp-colors.$gray-900;
+			font-weight: 500;
+			display: flex;
+			gap: 8px;
+			.newspack-badge {
+				font-weight: 400;
+			}
+		}
+	}
+	&__is-active {
+		border-color: var(--wp-admin-theme-color);
+		box-shadow: var(--wp-admin-theme-color) 0 0 0 1px;
+		button.newspack-card--core__header {
+			background-color: rgba( var(--wp-admin-theme-color--rgb), 0.04 );
+			color: var(--wp-admin-theme-color);
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				color: var(--wp-admin-theme-color);
+			}
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+		}
+
+		&.newspack-card--core__has-children {
+			button.newspack-card--core__header {
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+			.newspack-card--core__body {
+				border-top: 1px solid var(--wp-admin-theme-color);
+			}
+			.components-card__divider {
+				background: wp-colors.$gray-100;
+			}
+		}
+	}
+	&__buttons-card {
+		display: block;
+		text-decoration: none;
+		&:active,
+		&:hover {
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: var(--wp-admin-theme-color) 0 0 0 1px;
+			.newspack-card--core__header {
+				color: var(--wp-admin-theme-color);
+				h1,
+				h2,
+				h3,
+				h4,
+				h5,
+				h6 {
+					color: var(--wp-admin-theme-color);
+				}
+				svg {
+					fill: var(--wp-admin-theme-color);
+				}
+			}
+		}
+	}
+	hr.components-card__divider {
+		margin: 0;
+	}
+	&__is-narrow {
+		margin-left: auto;
+		margin-right: auto;
+		@media screen and ( min-width: 608px ) {
+			max-width: 576px;
+		}
+	}
+	&__body {
+		> div:not(.components-card__body):not(.components-card__media):not(.components-card__divider) {
+			padding: 16px 24px;
+			.newspack-card--core__is-small & {
+				padding: 16px;
+			}
+			.newspack-card--core__no-margin & {
+				padding: 0;
+			}
+		}
+	}
+}

package/dist/esm/card/style.scss

@@ -133,11 +133,11 @@
 
 	// Thematic Break
 
-	hr {
+	hr:not(.newspack-divider) {
 		background: wp-colors.$gray-300;
 		border: 0;
 		height: 1px;
-		margin: 48px 0;
+		margin: 32px 0;
 
 		@media screen and ( min-width: 744px ) {
 			margin: 64px 0;

package/dist/esm/card-settings-group/index.js

@@ -0,0 +1,42 @@
+/**
+ * Card - Settings group component.
+ */
+
+/**
+ * Internal dependencies
+ */
+import { Card } from '../';
+import './style.scss';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const CardSettingsGroup = ({
+  actionType = 'chevron',
+  children,
+  icon = null,
+  title = '',
+  description = '',
+  isActive = false,
+  onEnable = () => {}
+}) => {
+  return /*#__PURE__*/_jsx(Card, {
+    className: "newspack-card--core--settings-group",
+    actionType: actionType,
+    isSmall: true,
+    __experimentalCoreCard: true,
+    __experimentalCoreProps: {
+      header: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("h3", {
+          children: title
+        }), description && /*#__PURE__*/_jsx("p", {
+          children: description
+        })]
+      }),
+      onHeaderClick: onEnable,
+      icon,
+      iconBackgroundColor: true,
+      isActive,
+      title
+    },
+    children: isActive && children
+  });
+};
+export default CardSettingsGroup;

package/dist/esm/card-settings-group/style.scss

@@ -0,0 +1,33 @@
+.newspack-card--core--settings-group {
+	.components-card__body {
+		> .newspack-notice {
+			margin: 16px 0;
+		}
+		> .components-base-control {
+			&:first-child {
+				margin-top: 0;
+			}
+			+ .components-base-control,
+			+ .newspack-form-token-field {
+				margin-top: 16px;
+			}
+		}
+
+		/** ToggleControl switch should appear after the label. */
+		> .components-toggle-control {
+			.components-h-stack {
+				.components-form-toggle {
+					order: 2;
+				}
+			}
+			.components-toggle-control__help {
+				margin-inline-start: auto;
+			}
+		}
+		.newspack-grid:last-child,
+		.components-base-control:last-child,
+		p:last-child {
+			margin-bottom: 0;
+		}
+	}
+}

package/dist/esm/card-sortable-list/index.js

@@ -0,0 +1,381 @@
+/**
+ * Card - Sortable list component.
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { Disabled, Draggable, __experimentalVStack as VStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { useEffect, useLayoutEffect, useRef, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Badge, Card } from '../';
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DROP_ANIMATION_DURATION = 400; // ms — must match $drop-duration in style.scss
+const BUTTON_MOVE_DURATION = 200; // ms — must match $shift-duration in style.scss
+
+const CardSortableList = ({
+  disabled = false,
+  items = [],
+  onDragCallback = () => {}
+}) => {
+  const [sortedItems, setSortedItems] = useState(items);
+  const [draggingIndex, setDraggingIndex] = useState(null);
+  const [hoverIndex, setHoverIndex] = useState(null);
+  const [droppedIndex, setDroppedIndex] = useState(null);
+  const [measurements, setMeasurements] = useState(null);
+  const listRef = useRef(null);
+  const itemRefs = useRef([]);
+  const dropAnimationTimer = useRef(null);
+  const buttonMoveTimer = useRef(null);
+  const buttonFlipRef = useRef(null);
+  const [buttonMoveId, setButtonMoveId] = useState(0);
+  const documentDragOverRef = useRef(null);
+
+  // Keep sortedItems in sync when the items prop changes externally (e.g. after a save).
+  useEffect(() => {
+    setSortedItems(items);
+  }, [items]);
+
+  // Clean up any pending animation timer on unmount.
+  useEffect(() => {
+    return () => {
+      if (dropAnimationTimer.current) {
+        clearTimeout(dropAnimationTimer.current);
+      }
+      if (buttonMoveTimer.current) {
+        clearTimeout(buttonMoveTimer.current);
+      }
+      if (documentDragOverRef.current) {
+        document.removeEventListener('dragover', documentDragOverRef.current);
+      }
+    };
+  }, []);
+
+  /**
+   * Handle a chevron-button move. Records item positions before the reorder so
+   * the FLIP animation can play after React commits the new DOM order.
+   */
+  const handleButtonMove = (fromIndex, toIndex) => {
+    if (toIndex < 0 || toIndex >= sortedItems.length) {
+      return;
+    }
+    const fromEl = itemRefs.current[fromIndex];
+    const toEl = itemRefs.current[toIndex];
+    if (!fromEl || !toEl) {
+      return;
+    }
+    const stride = Math.abs(toEl.getBoundingClientRect().top - fromEl.getBoundingClientRect().top);
+    const direction = toIndex > fromIndex ? 1 : -1;
+    buttonFlipRef.current = {
+      fromIndex,
+      toIndex,
+      stride,
+      direction
+    };
+    const reordered = [...sortedItems];
+    const [moved] = reordered.splice(fromIndex, 1);
+    reordered.splice(toIndex, 0, moved);
+    setSortedItems(reordered);
+    setButtonMoveId(id => id + 1);
+  };
+
+  /**
+   * FLIP Invert+Play step: runs synchronously after React commits the reordered
+   * DOM. Animate each swapped item from its previous position to its new one
+   * using inline CSS transitions (no CSS classes, to avoid creating a new
+   * containing block that would break position:fixed on the Draggable clone).
+   */
+  useLayoutEffect(() => {
+    const flipData = buttonFlipRef.current;
+    if (!flipData) {
+      return;
+    }
+    buttonFlipRef.current = null;
+    const {
+      fromIndex,
+      toIndex,
+      stride,
+      direction
+    } = flipData;
+    const startAnimation = (el, startY) => {
+      if (!el) {
+        return;
+      }
+      // Snap to the starting position with no transition.
+      el.style.transition = 'none';
+      el.style.transform = `translateY(${startY}px)`;
+      // Force a reflow so the browser registers the starting position
+      // before we switch to the animated transition.
+      el.getBoundingClientRect();
+      // Animate from startY back to 0 (its new natural position).
+      el.style.transition = `transform ${BUTTON_MOVE_DURATION}ms ease-out`;
+      el.style.transform = '';
+    };
+
+    // Moved item is now at toIndex: animate it in from its old position.
+    startAnimation(itemRefs.current[toIndex], -direction * stride);
+    // Displaced item is now at fromIndex: animate it in from its old position.
+    startAnimation(itemRefs.current[fromIndex], direction * stride);
+    if (buttonMoveTimer.current) {
+      clearTimeout(buttonMoveTimer.current);
+    }
+    buttonMoveTimer.current = setTimeout(() => {
+      // Clear inline animation styles before calling the external callback so
+      // the subsequent React re-render doesn't fight a live animation.
+      [fromIndex, toIndex].forEach(i => {
+        const el = itemRefs.current[i];
+        if (el) {
+          el.style.transition = '';
+          el.style.transform = '';
+        }
+      });
+
+      // Move focus to the matching chevron button on the card at toIndex.
+      // Focus before onDragCallback so a parent rerender can't steal focus.
+      const targetEl = itemRefs.current[toIndex];
+      if (targetEl) {
+        const moveButtons = targetEl.querySelectorAll('.newspack-card--core__header__draggable-controls__move-buttons button');
+        // direction > 0 = moved down → prefer the down button (index 1).
+        // direction < 0 = moved up   → prefer the up   button (index 0).
+        const preferred = direction > 0 ? moveButtons[1] : moveButtons[0];
+        const fallback = direction > 0 ? moveButtons[0] : moveButtons[1];
+        if (preferred && !preferred.disabled) {
+          preferred.focus();
+        } else if (fallback && !fallback.disabled) {
+          fallback.focus();
+        }
+      }
+      onDragCallback(fromIndex, toIndex);
+      buttonMoveTimer.current = null;
+    }, BUTTON_MOVE_DURATION);
+  }, [buttonMoveId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleDragStart = index => {
+    // Cancel any in-progress button-move animation so no item wrapper keeps
+    // an inline transform. A transformed ancestor breaks position:fixed on
+    // the Draggable clone (CSS spec: fixed positioning is relative to the
+    // nearest ancestor with a transform/filter/perspective).
+    if (buttonMoveTimer.current) {
+      clearTimeout(buttonMoveTimer.current);
+      buttonMoveTimer.current = null;
+      itemRefs.current.forEach(el => {
+        if (el) {
+          el.style.transition = '';
+          el.style.transform = '';
+        }
+      });
+    }
+    const listEl = listRef.current;
+    if (listEl) {
+      var _rects$index$height;
+      const itemEls = itemRefs.current;
+      const rects = itemEls.map(el => el?.getBoundingClientRect());
+
+      // Stride = item height + gap to next item (difference between consecutive tops).
+      const itemStrides = rects.map((rect, i) => {
+        if (!rect) {
+          return 0;
+        }
+        const nextRect = rects[i + 1];
+        return nextRect ? nextRect.top - rect.top : rect.height;
+      });
+      setMeasurements({
+        lockedHeight: listEl.getBoundingClientRect().height,
+        sourceHeight: (_rects$index$height = rects[index]?.height) !== null && _rects$index$height !== void 0 ? _rects$index$height : 0,
+        itemStrides,
+        itemTops: rects.map(rect => {
+          var _rect$top;
+          return (_rect$top = rect?.top) !== null && _rect$top !== void 0 ? _rect$top : 0;
+        })
+      });
+    }
+    // Make the entire document a valid drop target so the browser skips
+    // its snap-back animation when the cursor is released outside the list.
+    const preventSnapback = e => e.preventDefault();
+    document.addEventListener('dragover', preventSnapback);
+    documentDragOverRef.current = preventSnapback;
+    setDraggingIndex(index);
+    setDroppedIndex(null);
+  };
+  const clearDragState = () => {
+    if (documentDragOverRef.current) {
+      document.removeEventListener('dragover', documentDragOverRef.current);
+      documentDragOverRef.current = null;
+    }
+    setDraggingIndex(null);
+    setHoverIndex(null);
+    setMeasurements(null);
+  };
+
+  /**
+   * Determine the drop target index from cursor coordinates and the item
+   * top positions snapshotted at drag start. Mirrors the midpoint logic
+   * previously used in getDropIndex but works without a live event target.
+   */
+  const getDropIndexFromCursor = (clientY, m, sourceIndex) => {
+    const {
+      itemTops,
+      itemStrides,
+      sourceHeight
+    } = m;
+    for (let i = 0; i < itemTops.length; i++) {
+      const movingDown = sourceIndex > i;
+      const midpoint = itemTops[i] + (movingDown ? itemStrides[i] : itemStrides[i] - sourceHeight);
+      if (clientY < midpoint) {
+        return i;
+      }
+    }
+    return itemTops.length; // below all items
+  };
+  const handleDragEnd = event => {
+    // Take a local copy of measurements before clearDragState nulls it.
+    const m = measurements;
+    const sourceIndex = draggingIndex;
+    clearDragState();
+    if (m === null || sourceIndex === null) {
+      return;
+    }
+    const dropIndex = getDropIndexFromCursor(event.clientY, m, sourceIndex);
+
+    // Compute the destination index in the post-removal array.
+    // After splicing out the dragged item, indices above it shift down by one.
+    const insertIndex = dropIndex > sourceIndex ? dropIndex - 1 : dropIndex;
+    if (insertIndex === sourceIndex) {
+      return;
+    }
+    const reordered = [...sortedItems];
+    const [moved] = reordered.splice(sourceIndex, 1);
+    reordered.splice(insertIndex, 0, moved);
+
+    // First render: show items in their new order with no animation.
+    // The dragging CSS classes are already cleared by clearDragState() above,
+    // so no transitions will fire on this paint.
+    setSortedItems(reordered);
+
+    // Next frame: trigger the drop animation on the newly-positioned item,
+    // then call onDragCallback after the animation completes.
+    requestAnimationFrame(() => {
+      setDroppedIndex(insertIndex);
+      dropAnimationTimer.current = setTimeout(() => {
+        setDroppedIndex(null);
+        onDragCallback(sourceIndex, insertIndex);
+      }, DROP_ANIMATION_DURATION);
+    });
+  };
+  const handleDragOver = (event, index) => {
+    event.preventDefault();
+    if (!measurements) {
+      return;
+    }
+    const rect = event.currentTarget.getBoundingClientRect();
+    const midpoint = rect.top + rect.height / 2;
+    setHoverIndex(event.clientY < midpoint ? index : index + 1);
+  };
+
+  /**
+   * Compute the translateY for a non-source item at `index` given the current
+   * draggingIndex and hoverIndex, so that items visually shift to show the gap
+   * while the container's layout height stays fixed.
+   *
+   * The source item has been visually hidden but still occupies its layout slot.
+   * Items between the source and the hover position need to slide by the source
+   * item's stride (height + gap) to either fill the vacated source slot or make
+   * room for the incoming gap at the hover position.
+   */
+  const getTranslateY = index => {
+    var _itemStrides$dragging;
+    if (draggingIndex === null || hoverIndex === null || !measurements) {
+      return 0;
+    }
+    if (index === draggingIndex) {
+      return 0;
+    }
+    const {
+      itemStrides,
+      sourceHeight
+    } = measurements;
+    const sourceStride = (_itemStrides$dragging = itemStrides[draggingIndex]) !== null && _itemStrides$dragging !== void 0 ? _itemStrides$dragging : sourceHeight;
+    if (hoverIndex > draggingIndex) {
+      // Dragging downward: items strictly between source and hover position slide up.
+      if (index > draggingIndex && index < hoverIndex) {
+        return -sourceStride;
+      }
+    } else if (index >= hoverIndex && index < draggingIndex) {
+      // Dragging upward: items between hover position and source slide down.
+      return sourceStride;
+    }
+    return 0;
+  };
+  const isDragging = draggingIndex !== null;
+  return /*#__PURE__*/_jsx(VStack, {
+    ref: listRef,
+    className: classNames('newspack-card--core--sortable-list', disabled && 'newspack-card--core--sortable-list__is-disabled', isDragging && 'newspack-card--core--sortable-list__is-dragging'),
+    style: measurements ? {
+      height: measurements.lockedHeight
+    } : undefined,
+    spacing: 4,
+    children: sortedItems.map((item, index) => {
+      const translateY = getTranslateY(index);
+      return /*#__PURE__*/_jsx(Disabled, {
+        isDisabled: disabled,
+        children: /*#__PURE__*/_jsx("div", {
+          ref: el => {
+            itemRefs.current[index] = el;
+          },
+          className: classNames('newspack-card--core--sortable-list__item', {
+            'is-source': draggingIndex === index,
+            'is-dropped': droppedIndex === index
+          }),
+          style: translateY ? {
+            transform: `translateY(${translateY}px)`
+          } : {
+            transition: !isDragging ? 'none' : undefined
+          },
+          id: `draggable-card-${index}`,
+          onDragOver: e => handleDragOver(e, index),
+          children: /*#__PURE__*/_jsx(Draggable, {
+            transferData: {},
+            cloneClassname: "newspack-card--core--sortable-list__item__clone",
+            elementId: `draggable-card-${index}`,
+            onDragStart: () => handleDragStart(index),
+            onDragEnd: handleDragEnd,
+            appendToOwnerDocument: true,
+            children: ({
+              onDraggableStart,
+              onDraggableEnd
+            }) => /*#__PURE__*/_jsx(Card, {
+              isSmall: true,
+              draggable: true,
+              onDragStart: onDraggableStart,
+              onDragEnd: onDraggableEnd,
+              __experimentalCoreCard: true,
+              __experimentalCoreProps: {
+                header: /*#__PURE__*/_jsxs("h3", {
+                  children: [item.title, /*#__PURE__*/_jsx(Badge, {
+                    level: item.badgeLevel,
+                    text: item.badgeText
+                  })]
+                }),
+                isDraggable: true,
+                isFirstTarget: index === 0,
+                isLastTarget: index === sortedItems.length - 1,
+                dragIndex: index,
+                onDragCallback: handleButtonMove
+              }
+            })
+          })
+        })
+      }, item.id);
+    })
+  });
+};
+export default CardSortableList;