newspack-components 4.3.0 → 4.4.0-alpha.1

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

@@ -3,26 +3,27 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 @use "../../../colors/colors.module" as colors;
 
 .newspack-card--core,
 .newspack-wizard .newspack-card--core {
-	background: white;
+	background: wp-colors.$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%;
+		border-radius: wp-vars.$radius-round;
 		display: grid;
-		height: 48px;
+		height: wp-vars.$grid-unit-60;
 		place-items: center;
-		width: 48px;
+		width: wp-vars.$grid-unit-60;
 		svg {
 			fill: var(--wp-admin-theme-color);
-			height: 40px;
-			width: 40px;
+			height: wp-vars.$grid-unit-50;
+			width: wp-vars.$grid-unit-50;
 		}
 		.newspack-card--core__has-icon-background-color & {
 			background: var(--wp-admin-theme-color-lighter-10);
@@ -35,24 +36,37 @@
 		h4,
 		h5,
 		h6 {
-			font-size: 14px;
-			font-weight: 500;
+			font-size: wp-vars.$font-size-large;
 		}
-		.newspack-card--core__icon {
-			height: 40px;
-			width: 40px;
-			svg {
-				height: 24px;
-				width: 24px;
+		.newspack-card--core {
+			&__header-content {
+				* {
+					line-height: wp-vars.$font-line-height-small;
+				}
+			}
+			&__icon {
+				height: wp-vars.$grid-unit-50;
+				width: wp-vars.$grid-unit-50;
+				svg {
+					height: wp-vars.$grid-unit-30;
+					width: wp-vars.$grid-unit-30;
+				}
 			}
 		}
 	}
 	&__no-margin .components-card__body {
 		padding: 0 !important;
 	}
+	&__is-disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+		.newspack-card--core__header {
+			pointer-events: none;
+		}
+	}
 	&__header {
 		color: wp-colors.$gray-700;
-		column-gap: 16px;
+		flex-wrap: wrap;
 		position: relative;
 		.newspack-card--core__action {
 			margin: 0;
@@ -68,22 +82,26 @@
 				word-wrap: normal !important;
 			}
 		}
-		.components-dropdown-menu {
+		> .components-dropdown-menu {
 			aspect-ratio: 1;
 			border-left: 1px solid wp-colors.$gray-200;
 			display: grid;
 			height: 100%;
+			max-width: 50px;
 			padding: 4px;
 			place-items: center;
 			position: absolute;
 			right: 0;
 			top: 0;
 		}
+		&__action {
+			background-color: wp-colors.$white;
+			flex: 1 100%;
+			justify-content: center !important;
+		}
 	}
 	&__header--is-draggable {
-		.newspack-card--core__header-content {
-			padding-left: 65px;
-		}
+		padding-left: 80px !important;
 		.newspack-card--core__header__draggable-controls {
 			align-items: center;
 			border-right: 1px solid wp-colors.$gray-200;
@@ -110,6 +128,21 @@
 			}
 		}
 	}
+	// Two classes beat the single-class .components-card__header border-bottom
+	// rule from WP Core without needing !important.
+	&__header.newspack-card--core__header--no-border {
+		border-bottom: none;
+	}
+	&__body.newspack-card--core__body--no-header-border {
+		> div:not(.components-card__body):not(.components-card__media):not(.components-card__divider) {
+			padding-top: 0;
+		}
+	}
+	&__header--has-actions {
+		.newspack-card--core__header {
+			padding-right: 70px;
+		}
+	}
 	button.newspack-card--core__header {
 		appearance: none;
 		background-color: white;
@@ -140,18 +173,25 @@
 		h6 {
 			align-items: center;
 			color: wp-colors.$gray-900;
-			font-weight: 500;
+			font-weight: 600;
 			display: flex;
 			gap: 8px;
+			a {
+				color: inherit;
+				text-decoration: none;
+				&:hover {
+					text-decoration: underline;
+				}
+			}
 			.newspack-badge {
 				font-weight: 400;
 			}
 		}
 	}
-	&__is-active {
+	&__is-active:not(.newspack-card--core__is-draggable) {
 		border-color: var(--wp-admin-theme-color);
 		box-shadow: var(--wp-admin-theme-color) 0 0 0 1px;
-		button.newspack-card--core__header {
+		.newspack-card--core__header {
 			background-color: rgba( var(--wp-admin-theme-color--rgb), 0.04 );
 			color: var(--wp-admin-theme-color);
 			h1,
@@ -168,7 +208,7 @@
 		}
 
 		&.newspack-card--core__has-children {
-			button.newspack-card--core__header {
+			.newspack-card--core__header {
 				border-bottom-left-radius: 0;
 				border-bottom-right-radius: 0;
 			}
@@ -203,14 +243,39 @@
 			}
 		}
 	}
+	&.is-destructive {
+		.newspack-card--core__header {
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				color: wp-colors.$alert-red;
+			}
+			&:hover,
+			&:focus {
+				background-color: wp-colors.$gray-100;
+			}
+		}
+		.newspack-card--core__action,
+		.newspack-card--core__action svg {
+			fill: wp-colors.$alert-red;
+		}
+	}
 	hr.components-card__divider {
 		margin: 0;
 	}
 	&__is-narrow {
 		margin-left: auto;
 		margin-right: auto;
-		@media screen and ( min-width: 608px ) {
-			max-width: 576px;
+		@media screen and ( min-width: 615px ) {
+			max-width: 583px;
+		}
+	}
+	&__has-grey-header {
+		.newspack-card--core__header {
+			background-color: rgba(black, 0.025);
 		}
 	}
 	&__body {
@@ -223,5 +288,8 @@
 				padding: 0;
 			}
 		}
+		> .components-card__media {
+			border-radius: 0 !important;
+		}
 	}
 }

package/dist/cjs/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;
 		}
 	}
 

package/dist/cjs/card-feature/index.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+var _icons = require("@wordpress/icons");
+var _badge = _interopRequireDefault(require("../badge"));
+var _button = _interopRequireDefault(require("../button"));
+var _card = _interopRequireDefault(require("../card"));
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+// eslint-disable-line @wordpress/no-unsafe-wp-apis
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * 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 = (0, _classnames["default"])('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 : (0, _i18n.__)('Enabled', 'newspack-plugin'),
+      level: badgeLevel
+    };
+  }
+  var isConfigureState = enabled && !requirements;
+  var buttonLabel = isConfigureState ? configureLabel !== null && configureLabel !== void 0 ? configureLabel : (0, _i18n.__)('Configure', 'newspack-plugin') : enableLabel !== null && enableLabel !== void 0 ? enableLabel : (0, _i18n.__)('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 ? (0, _classnames["default"])('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__*/(0, _jsxRuntime.jsx)(_card["default"], {
+    className: classes,
+    __experimentalCoreCard: true,
+    __experimentalCoreProps: {
+      headerStyle: {
+        padding: 32
+      },
+      header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+          alignment: "top",
+          spacing: 4,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "newspack-card-feature__content",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+              className: "newspack-card-feature__title",
+              children: title
+            }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              className: "newspack-card-feature__description",
+              children: description
+            })]
+          }), icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: iconClasses,
+            style: {
+              backgroundColor: icon.backgroundColor,
+              color: icon.fill
+            },
+            children: icon.node
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+          alignment: "edge",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+            expanded: false,
+            spacing: "8px",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
+              variant: isConfigureState ? 'tertiary' : 'secondary',
+              disabled: isMuted && !requirementsActionable,
+              onClick: handleButtonClick,
+              size: "compact",
+              children: buttonLabel
+            }), isConfigureState && !!(moreControls !== null && moreControls !== void 0 && moreControls.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
+              icon: _icons.moreVertical,
+              label: (0, _i18n.__)('More', 'newspack-plugin'),
+              controls: moreControls,
+              toggleProps: {
+                size: 'compact'
+              }
+            })]
+          }), badge && /*#__PURE__*/(0, _jsxRuntime.jsx)(_badge["default"], {
+            text: badge.text,
+            level: badge.level
+          })]
+        })]
+      })
+    }
+  });
+};
+var _default = exports["default"] = CardFeature;

package/dist/cjs/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/cjs/card-form/index.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _element = require("@wordpress/element");
+var _compose = require("@wordpress/compose");
+var _components = require("@wordpress/components");
+var _badge = _interopRequireDefault(require("../badge"));
+var _card = _interopRequireDefault(require("../card"));
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+// eslint-disable-line @wordpress/no-unsafe-wp-apis
+
+/**
+ * Internal dependencies
+ */
+
+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 = (0, _element.useRef)(null);
+  var previousActiveRef = (0, _element.useRef)(null);
+  var instanceId = (0, _compose.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.
+  (0, _element.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.
+  (0, _element.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__*/(0, _jsxRuntime.jsx)(_card["default"], {
+    className: (0, _classnames["default"])('newspack-card-form', className, {
+      'newspack-card-form--open': isOpen
+    }),
+    __experimentalCoreCard: true,
+    isSmall: true,
+    __experimentalCoreProps: {
+      hasHeaderBorder: !isOpen,
+      header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+        justify: "space-between",
+        style: {
+          width: '100%'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+          spacing: 0,
+          style: {
+            flex: 1,
+            minWidth: 0
+          },
+          children: [(0, _element.createElement)(titleTag, {
+            id: titleId,
+            className: 'newspack-card-form__title'
+          }, title), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            className: "newspack-card-form__description",
+            children: description
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+          spacing: 2,
+          expanded: false,
+          children: [badge && /*#__PURE__*/(0, _jsxRuntime.jsx)(_badge["default"], {
+            text: badge.text,
+            level: (_badge$level = badge.level) !== null && _badge$level !== void 0 ? _badge$level : 'success'
+          }), actions]
+        })]
+      })
+    },
+    children: isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: bodyRef,
+      id: bodyId,
+      role: "region",
+      "aria-labelledby": titleId,
+      tabIndex: -1,
+      className: "newspack-card-form__body",
+      children: children
+    })
+  });
+};
+var _default = exports["default"] = _CardForm;

package/dist/cjs/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/cjs/card-settings-group/index.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
 var _ = require("../");
 require("./style.scss");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -11,21 +13,36 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Card - Settings group component.
  */
 
+/**
+ * External dependencies
+ */
+
 /**
  * Internal dependencies
  */
 
-const CardSettingsGroup = ({
-  actionType = 'chevron',
-  children,
-  icon = null,
-  title = '',
-  description = '',
-  isActive = false,
-  onEnable = () => {}
-}) => {
+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__*/(0, _jsxRuntime.jsx)(_.Card, {
-    className: "newspack-card--core--settings-group",
+    className: (0, _classnames["default"])('newspack-card--core--settings-group', className),
     actionType: actionType,
     isSmall: true,
     __experimentalCoreCard: true,
@@ -37,13 +54,16 @@ const CardSettingsGroup = ({
           children: description
         })]
       }),
-      onHeaderClick: onEnable,
-      icon,
+      headerAction: headerAction,
+      onHeaderClick: onHeaderClick,
+      onToggle: onEnable,
+      disabled: disabled,
+      icon: icon,
       iconBackgroundColor: true,
-      isActive,
-      title
+      isActive: isActive,
+      title: title
     },
     children: isActive && children
   });
 };
-var _default = exports.default = CardSettingsGroup;
+var _default = exports["default"] = CardSettingsGroup;