newspack-components 4.2.0 → 4.4.0-epic-editor-refactor.1

package/dist/esm/card/style.scss

@@ -52,8 +52,8 @@
 		margin-left: auto;
 		margin-right: auto;
 
-		@media screen and ( min-width: 608px ) {
-			max-width: 576px;
+		@media screen and ( min-width: 615px ) {
+			max-width: 583px;
 		}
 	}
 
@@ -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-feature/index.js

@@ -0,0 +1,131 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { DropdownMenu, __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Badge from '../badge';
+import Button from '../button';
+import Card from '../card';
+import './style.scss';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * CardFeature component.
+ *
+ * A card for presenting a named feature or setting with a predictable
+ * action model: a primary button, an optional "More" dropdown when enabled,
+ * and an automatic badge reflecting the current state.
+ */
+var CardFeature = function CardFeature(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    icon = _ref.icon,
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? false : _ref$enabled,
+    requirements = _ref.requirements,
+    _ref$requirementsActi = _ref.requirementsActionable,
+    requirementsActionable = _ref$requirementsActi === void 0 ? false : _ref$requirementsActi,
+    enableLabel = _ref.enableLabel,
+    configureLabel = _ref.configureLabel,
+    onEnable = _ref.onEnable,
+    onConfigure = _ref.onConfigure,
+    moreControls = _ref.moreControls,
+    badgeText = _ref.badgeText,
+    _ref$badgeLevel = _ref.badgeLevel,
+    badgeLevel = _ref$badgeLevel === void 0 ? 'success' : _ref$badgeLevel,
+    className = _ref.className;
+  var isMuted = !!requirements;
+  var classes = classnames('newspack-card-feature', className, {
+    'newspack-card-feature--muted': isMuted
+  });
+  var badge;
+  if (requirements) {
+    badge = {
+      text: requirements,
+      level: 'error'
+    };
+  } else if (enabled) {
+    badge = {
+      text: badgeText !== null && badgeText !== void 0 ? badgeText : __('Enabled', 'newspack-plugin'),
+      level: badgeLevel
+    };
+  }
+  var isConfigureState = enabled && !requirements;
+  var buttonLabel = isConfigureState ? configureLabel !== null && configureLabel !== void 0 ? configureLabel : __('Configure', 'newspack-plugin') : enableLabel !== null && enableLabel !== void 0 ? enableLabel : __('Enable', 'newspack-plugin');
+  var handleButtonClick = function handleButtonClick() {
+    if (isConfigureState) {
+      onConfigure === null || onConfigure === void 0 || onConfigure();
+    } else {
+      onEnable === null || onEnable === void 0 || onEnable();
+    }
+  };
+  var iconClasses = icon ? classnames('newspack-card-feature__icon', {
+    'newspack-card-feature__icon--radius-small': !!icon.backgroundColor && icon.radius !== 'full',
+    'newspack-card-feature__icon--radius-full': icon.radius === 'full'
+  }) : undefined;
+  return /*#__PURE__*/_jsx(Card, {
+    className: classes,
+    __experimentalCoreCard: true,
+    __experimentalCoreProps: {
+      headerStyle: {
+        padding: 32
+      },
+      header: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsxs(HStack, {
+          alignment: "top",
+          spacing: 4,
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: "newspack-card-feature__content",
+            children: [/*#__PURE__*/_jsx("h2", {
+              className: "newspack-card-feature__title",
+              children: title
+            }), description && /*#__PURE__*/_jsx("p", {
+              className: "newspack-card-feature__description",
+              children: description
+            })]
+          }), icon && /*#__PURE__*/_jsx("div", {
+            className: iconClasses,
+            style: {
+              backgroundColor: icon.backgroundColor,
+              color: icon.fill
+            },
+            children: icon.node
+          })]
+        }), /*#__PURE__*/_jsxs(HStack, {
+          alignment: "edge",
+          children: [/*#__PURE__*/_jsxs(HStack, {
+            expanded: false,
+            spacing: "8px",
+            children: [/*#__PURE__*/_jsx(Button, {
+              variant: isConfigureState ? 'tertiary' : 'secondary',
+              disabled: isMuted && !requirementsActionable,
+              onClick: handleButtonClick,
+              size: "compact",
+              children: buttonLabel
+            }), isConfigureState && !!(moreControls !== null && moreControls !== void 0 && moreControls.length) && /*#__PURE__*/_jsx(DropdownMenu, {
+              icon: moreVertical,
+              label: __('More', 'newspack-plugin'),
+              controls: moreControls,
+              toggleProps: {
+                size: 'compact'
+              }
+            })]
+          }), badge && /*#__PURE__*/_jsx(Badge, {
+            text: badge.text,
+            level: badge.level
+          })]
+        })]
+      })
+    }
+  });
+};
+export default CardFeature;

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

@@ -0,0 +1,75 @@
+/**
+ * CardFeature
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+.newspack-card-feature {
+	height: 100%;
+
+	.newspack-card--core__header {
+		height: 100%;
+	}
+
+	.newspack-card--core__header-content {
+		gap: 16px;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+
+		// Push the action row (buttons + badge) to the bottom.
+		> :last-child {
+			margin-top: auto;
+		}
+	}
+
+	&__content {
+		flex: 1;
+		min-width: 0; // prevent flex blowout on long words
+	}
+
+	&__title {
+		font-size: wp-vars.$font-size-x-large;
+		line-height: wp-vars.$font-line-height-x-large;
+		text-align: left;
+	}
+
+	&__description {
+		text-align: left;
+	}
+
+	&__icon {
+		align-items: center;
+		display: flex;
+		flex: 0 0 40px;
+		height: 40px;
+		justify-content: center;
+
+		svg {
+			display: block;
+			fill: currentcolor;
+			height: 24px;
+			width: 24px;
+		}
+
+		&--radius-small {
+			border-radius: wp-vars.$radius-small;
+		}
+
+		&--radius-full {
+			border-radius: wp-vars.$radius-round;
+		}
+	}
+
+	// Unmet requirements state: lighter border, muted content.
+	&.newspack-card-feature--muted {
+		border-color: wp-colors.$gray-100;
+		box-shadow: wp-colors.$gray-100 0 0 0 1px;
+
+		.newspack-card-feature__title,
+		.newspack-card-feature__description {
+			color: wp-colors.$gray-700;
+		}
+	}
+}

package/dist/esm/card-form/index.js

@@ -0,0 +1,134 @@
+/**
+ * Card Form component.
+ *
+ * A card with an expandable inline form — title, description, optional badge,
+ * and an actions slot in the header. When `isOpen` is true, children are
+ * rendered in the card body and the header border is removed for a seamless look.
+ */
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef, createElement } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+
+/**
+ * Internal dependencies
+ */
+import Badge from '../badge';
+import Card from '../card';
+import './style.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var _CardForm = function CardForm(_ref) {
+  var _badge$level;
+  var title = _ref.title,
+    description = _ref.description,
+    badge = _ref.badge,
+    actions = _ref.actions,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    onRequestClose = _ref.onRequestClose,
+    _ref$titleLevel = _ref.titleLevel,
+    titleLevel = _ref$titleLevel === void 0 ? 3 : _ref$titleLevel,
+    className = _ref.className,
+    children = _ref.children;
+  var bodyRef = useRef(null);
+  var previousActiveRef = useRef(null);
+  var instanceId = useInstanceId(_CardForm, 'newspack-card-form');
+  var titleId = "".concat(instanceId, "__title");
+  var bodyId = "".concat(instanceId, "__body");
+
+  // Scope Escape handling to the open form's body, so multiple open CardForms
+  // don't all close on a single keypress, and callers can preventDefault from
+  // inner controls (e.g. select menus) without tripping the close.
+  useEffect(function () {
+    if (!isOpen || !onRequestClose) {
+      return;
+    }
+    var node = bodyRef.current;
+    if (!node) {
+      return;
+    }
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Escape' && !event.defaultPrevented) {
+        onRequestClose();
+      }
+    };
+    node.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return node.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, onRequestClose]);
+
+  // Move focus into the body on open and restore it to the trigger on close.
+  useEffect(function () {
+    if (!isOpen) {
+      return;
+    }
+    var node = bodyRef.current;
+    if (node) {
+      var _node$ownerDocument$a, _node$ownerDocument;
+      previousActiveRef.current = (_node$ownerDocument$a = (_node$ownerDocument = node.ownerDocument) === null || _node$ownerDocument === void 0 ? void 0 : _node$ownerDocument.activeElement) !== null && _node$ownerDocument$a !== void 0 ? _node$ownerDocument$a : null;
+      var focusable = node.querySelector('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])');
+      (focusable !== null && focusable !== void 0 ? focusable : node).focus();
+    }
+    return function () {
+      var _previousActiveRef$cu, _previousActiveRef$cu2;
+      (_previousActiveRef$cu = previousActiveRef.current) === null || _previousActiveRef$cu === void 0 || (_previousActiveRef$cu2 = _previousActiveRef$cu.focus) === null || _previousActiveRef$cu2 === void 0 || _previousActiveRef$cu2.call(_previousActiveRef$cu);
+    };
+  }, [isOpen]);
+  var titleTag = "h".concat(titleLevel);
+  return /*#__PURE__*/_jsx(Card, {
+    className: classnames('newspack-card-form', className, {
+      'newspack-card-form--open': isOpen
+    }),
+    __experimentalCoreCard: true,
+    isSmall: true,
+    __experimentalCoreProps: {
+      hasHeaderBorder: !isOpen,
+      header: /*#__PURE__*/_jsxs(HStack, {
+        justify: "space-between",
+        style: {
+          width: '100%'
+        },
+        children: [/*#__PURE__*/_jsxs(VStack, {
+          spacing: 0,
+          style: {
+            flex: 1,
+            minWidth: 0
+          },
+          children: [createElement(titleTag, {
+            id: titleId,
+            className: 'newspack-card-form__title'
+          }, title), description && /*#__PURE__*/_jsx("p", {
+            className: "newspack-card-form__description",
+            children: description
+          })]
+        }), /*#__PURE__*/_jsxs(HStack, {
+          spacing: 2,
+          expanded: false,
+          children: [badge && /*#__PURE__*/_jsx(Badge, {
+            text: badge.text,
+            level: (_badge$level = badge.level) !== null && _badge$level !== void 0 ? _badge$level : 'success'
+          }), actions]
+        })]
+      })
+    },
+    children: isOpen && /*#__PURE__*/_jsx("div", {
+      ref: bodyRef,
+      id: bodyId,
+      role: "region",
+      "aria-labelledby": titleId,
+      tabIndex: -1,
+      className: "newspack-card-form__body",
+      children: children
+    })
+  });
+};
+export default _CardForm;

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

@@ -0,0 +1,20 @@
+/**
+ * CardForm
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp;
+
+.newspack-card-form {
+	&__title {
+		font-size: wp.$font-size-large;
+		font-weight: 600;
+		line-height: wp.$font-line-height-large;
+	}
+
+	&__description {
+		color: wp-colors.$gray-700;
+		font-size: wp.$font-size-medium;
+		line-height: wp.$font-line-height-medium;
+	}
+}

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

@@ -0,0 +1,61 @@
+/**
+ * Card - Settings group component.
+ */
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { Card } from '../';
+import './style.scss';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var CardSettingsGroup = function CardSettingsGroup(_ref) {
+  var _ref$actionType = _ref.actionType,
+    actionType = _ref$actionType === void 0 ? 'none' : _ref$actionType,
+    children = _ref.children,
+    className = _ref.className,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? null : _ref$icon,
+    headerAction = _ref.headerAction,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? '' : _ref$title,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? '' : _ref$description,
+    _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+    _ref$onEnable = _ref.onEnable,
+    onEnable = _ref$onEnable === void 0 ? function () {} : _ref$onEnable,
+    _ref$onHeaderClick = _ref.onHeaderClick,
+    onHeaderClick = _ref$onHeaderClick === void 0 ? function () {} : _ref$onHeaderClick;
+  return /*#__PURE__*/_jsx(Card, {
+    className: classNames('newspack-card--core--settings-group', className),
+    actionType: actionType,
+    isSmall: true,
+    __experimentalCoreCard: true,
+    __experimentalCoreProps: {
+      header: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("h3", {
+          children: title
+        }), description && /*#__PURE__*/_jsx("p", {
+          children: description
+        })]
+      }),
+      headerAction: headerAction,
+      onHeaderClick: onHeaderClick,
+      onToggle: onEnable,
+      disabled: disabled,
+      icon: icon,
+      iconBackgroundColor: true,
+      isActive: isActive,
+      title: 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;
+		}
+	}
+}