newspack-components 4.2.0 → 4.3.0

package/dist/cjs/button/index.js

@@ -27,6 +27,7 @@ const {
 } = _router.default;
 const Button = ({
   href,
+  loading = undefined,
   onClick,
   ...otherProps
 }) => {
@@ -50,6 +51,7 @@ const Button = ({
   }
   // @ts-expect-error - @wordpress/components' Button can only have either href or onClick, not both.
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+    loading: loading ? true : undefined,
     ...otherProps
   });
 };

package/dist/cjs/card/core-card.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 _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+var _icons = require("@wordpress/icons");
+require("./style-core.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Card using WP Core's Card component.
+ * https://wordpress.github.io/gutenberg/?path=/docs/components-card--docs
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+const CoreCard = ({
+  actions,
+  actionType,
+  as,
+  buttonsCard,
+  className,
+  footer,
+  header,
+  icon,
+  iconBackgroundColor,
+  isActive,
+  isDraggable,
+  isFirstTarget,
+  isLastTarget,
+  isNarrow,
+  isSmall,
+  dragIndex,
+  onDragCallback = () => {},
+  onHeaderClick,
+  noBorder,
+  noMargin,
+  children = null,
+  ...otherProps
+}) => {
+  const classes = (0, _classnames.default)('newspack-card--core', className, (buttonsCard || as === 'a') && 'newspack-card--core__buttons-card', isDraggable && 'newspack-card--core__is-draggable', isNarrow && 'newspack-card--core__is-narrow', isSmall && 'newspack-card--core__is-small', icon && 'newspack-card--core__has-icon', iconBackgroundColor && 'newspack-card--core__has-icon-background-color', isActive && 'newspack-card--core__is-active', children && 'newspack-card--core__has-children', noMargin && 'newspack-card--core__no-margin');
+  let sizeProps = isSmall ? 'small' : otherProps.size;
+  if (buttonsCard || as === 'a') {
+    if (!isSmall) {
+      sizeProps = 'large';
+    }
+    if (as !== 'a') {
+      otherProps.as = 'a'; // Render as an anchor tag.
+    }
+  }
+  if (noBorder) {
+    otherProps.isBorderless = true;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Card, {
+    as: as,
+    className: classes,
+    ...otherProps,
+    children: [(header || icon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.CardHeader, {
+      as: onHeaderClick ? 'button' : undefined,
+      className: (0, _classnames.default)('newspack-card--core__header', isDraggable && 'newspack-card--core__header--is-draggable'),
+      size: sizeProps,
+      onClick: onHeaderClick,
+      children: [isDraggable && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "newspack-card--core__header__draggable-controls",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "newspack-card--core__header__draggable-controls__drag-handle",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+            icon: _icons.dragHandle
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "newspack-card--core__header__draggable-controls__move-buttons",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+            icon: _icons.chevronUp,
+            onClick: () => onDragCallback(dragIndex, dragIndex - 1),
+            disabled: isFirstTarget,
+            label: (0, _i18n.__)('Move one position up', 'newspack-plugin'),
+            size: "small"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+            icon: _icons.chevronDown,
+            onClick: () => onDragCallback(dragIndex, dragIndex + 1),
+            disabled: isLastTarget,
+            label: (0, _i18n.__)('Move one position down', 'newspack-plugin'),
+            size: "small"
+          })]
+        })]
+      }), icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-card--core__icon",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+          icon: icon,
+          height: isSmall ? 24 : 48,
+          width: isSmall ? 24 : 48
+        })
+      }), header && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-card--core__header-content",
+        children: header
+      }), !actions?.length > 0 && actionType === 'chevron' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+        className: "newspack-card--core__action",
+        icon: _icons.chevronRight,
+        height: 24,
+        width: 24
+      }), !actions?.length > 0 && actionType === 'toggle' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
+        className: "newspack-card--core__action",
+        label: otherProps.title,
+        hideLabelFromVision: true,
+        checked: isActive,
+        onChange: () => {}
+      }), actions?.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
+        icon: _icons.moreVertical,
+        label: (0, _i18n.__)('More', 'newspack-plugin'),
+        children: () => actions.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
+          icon: action.icon,
+          onClick: action.action,
+          disabled: action.disabled || false,
+          isDestructive: action.destructive || false,
+          children: action.label
+        }, index))
+      })]
+    }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "newspack-card--core__body",
+      children: children
+    }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CardFooter, {
+      size: sizeProps,
+      children: footer
+    })]
+  });
+};
+var _default = exports.default = CoreCard;

package/dist/cjs/card/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _element = require("@wordpress/element");
+var _coreCard = _interopRequireDefault(require("./core-card"));
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -39,8 +40,40 @@ class Card extends _element.Component {
       isSmall,
       isWhite,
       noBorder,
+      // Pass as `true` to render using WP Core's Card component: https://wordpress.github.io/gutenberg/?path=/docs/components-card--docs
+      __experimentalCoreCard,
+      // Pass props supported by WP Core's Card component in this single prop.
+      __experimentalCoreProps = {
+        actionType: null,
+        // chevron | toggle | button | link | none
+        header: null,
+        // Pass a React component to render in a CardHeader component.
+        icon: null,
+        footer: null,
+        // Pass a React component to render in a CardFooter component.
+        noMargin: false,
+        isDraggable: false,
+        dragIndex: null,
+        onDragCallback: () => {}
+      },
       ...otherProps
     } = this.props;
+    if (__experimentalCoreCard) {
+      const props = {
+        buttonsCard,
+        className,
+        isMedium,
+        isNarrow,
+        isSmall,
+        isWhite,
+        noBorder,
+        ...otherProps,
+        ...__experimentalCoreProps
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_coreCard.default, {
+        ...props
+      });
+    }
     const classes = (0, _classnames.default)('newspack-card', className, buttonsCard && 'newspack-card__buttons-card', headerActions && 'newspack-card__header-actions', isMedium && 'newspack-card__is-medium', isNarrow && 'newspack-card__is-narrow', isSmall && 'newspack-card__is-small', isWhite && 'newspack-card__is-white', noBorder && 'newspack-card__no-border');
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes,

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ = require("../");
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Card - Settings group component.
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const CardSettingsGroup = ({
+  actionType = 'chevron',
+  children,
+  icon = null,
+  title = '',
+  description = '',
+  isActive = false,
+  onEnable = () => {}
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Card, {
+    className: "newspack-card--core--settings-group",
+    actionType: actionType,
+    isSmall: true,
+    __experimentalCoreCard: true,
+    __experimentalCoreProps: {
+      header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+          children: title
+        }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: description
+        })]
+      }),
+      onHeaderClick: onEnable,
+      icon,
+      iconBackgroundColor: true,
+      isActive,
+      title
+    },
+    children: isActive && children
+  });
+};
+var _default = exports.default = CardSettingsGroup;

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